/* /fonts/fonts-home.css */
/* GENERATED by scripts/site-fonts.mjs from Google Fonts. Do not edit. */
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx3cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxTcwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxPcwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx_cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPx7cwgknk-6nFg.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/jetbrainsmono-tDbv2o-flEEny0FZhsfKu5WU4zr3E_BX0PnT8RD8yKwBNntkaToggR7BYRbKPxDcwgknk-4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_zWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_XWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_3WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_LWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_7WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J__WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTEKVt8k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_zWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_XWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_3WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_LWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_7WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J__WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTEKVt8k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_zWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_XWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_3WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_LWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_7WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J__WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTEKVt8k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_zWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_XWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_3WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_LWTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_7WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J__WTEKVt8m1ow.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/literata-or3PQ6P12-iJxAIgLa78DkTtAoDhk0oVpaK3YLanFLHpPf2TbLi4J_HWTEKVt8k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.1.woff2) format('woff2');
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.2.woff2) format('woff2');
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.3.woff2) format('woff2');
  unicode-range: U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.4.woff2) format('woff2');
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.5.woff2) format('woff2');
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.6.woff2) format('woff2');
  unicode-range: U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.7.woff2) format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.8.woff2) format('woff2');
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.9.woff2) format('woff2');
  unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QSIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89SCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89MCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* vietnamese */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QiIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TCIjqS-xRg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.1.woff2) format('woff2');
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.2.woff2) format('woff2');
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.3.woff2) format('woff2');
  unicode-range: U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.4.woff2) format('woff2');
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.5.woff2) format('woff2');
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.6.woff2) format('woff2');
  unicode-range: U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.7.woff2) format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.8.woff2) format('woff2');
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.9.woff2) format('woff2');
  unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QSIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89SCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89MCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* vietnamese */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QiIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TCIjqS-xRg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.1.woff2) format('woff2');
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.2.woff2) format('woff2');
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.3.woff2) format('woff2');
  unicode-range: U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.4.woff2) format('woff2');
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.5.woff2) format('woff2');
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.6.woff2) format('woff2');
  unicode-range: U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.7.woff2) format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.8.woff2) format('woff2');
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.9.woff2) format('woff2');
  unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QSIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89SCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89MCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* vietnamese */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QiIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TCIjqS-xRg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.1.woff2) format('woff2');
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.2.woff2) format('woff2');
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.3.woff2) format('woff2');
  unicode-range: U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.4.woff2) format('woff2');
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.5.woff2) format('woff2');
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.6.woff2) format('woff2');
  unicode-range: U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.7.woff2) format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.8.woff2) format('woff2');
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.9.woff2) format('woff2');
  unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QSIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89SCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89MCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* vietnamese */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QiIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TCIjqS-xRg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.1.woff2) format('woff2');
  unicode-range: U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.2.woff2) format('woff2');
  unicode-range: U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.3.woff2) format('woff2');
  unicode-range: U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.4.woff2) format('woff2');
  unicode-range: U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.5.woff2) format('woff2');
  unicode-range: U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.6.woff2) format('woff2');
  unicode-range: U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.7.woff2) format('woff2');
  unicode-range: U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.8.woff2) format('woff2');
  unicode-range: U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5;
}
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c8NTigkiy37Tzb9R1FN8B0HEQ.9.woff2) format('woff2');
  unicode-range: U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QSIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89SCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* math */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89MCIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF;
}
/* vietnamese */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QyIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89QiIjqS-xRgT5.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Playpen Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(/fonts/playpensans-dg4i_pj1p6gXP0gzAZgm4c89TCIjqS-xRg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* /base.css */
/* Shared ground for the SnackNotes website mockups.
   Tokens mirrored from packages/tokens/src/tokens.css so the mockups
   can be opened as plain files with no build step. */

/* Stand-ins while the site fonts load: Arial and Times New Roman, resized and
   spaced to take up the same room as Playpen Sans and Literata, so when the
   real font arrives the letters change shape but the lines don't move.
   Numbers measured from the font files (regular weight, a typical English line).
   They cover only the characters the real fonts have (Google's latin set), so a
   ♥ or an emoji still comes from the system as before. */
@font-face{font-family:'Playpen Sans Fallback';font-weight:400;src:local('Arial'),local('ArialMT');
  size-adjust:110.39%;ascent-override:105.98%;descent-override:30.8%;line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playpen Sans Fallback';font-weight:700;src:local('Arial Bold'),local('Arial-BoldMT');
  size-adjust:110.39%;ascent-override:105.98%;descent-override:30.8%;line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Literata Fallback';font-weight:400;src:local('Times New Roman'),local('TimesNewRomanPSMT');
  size-adjust:117.72%;ascent-override:99.98%;descent-override:26.16%;line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Literata Fallback';font-weight:700;src:local('Times New Roman Bold'),local('TimesNewRomanPS-BoldMT');
  size-adjust:117.72%;ascent-override:99.98%;descent-override:26.16%;line-gap-override:0%;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

:root {
  --coral:#FF6B6B; --yellow:#FFD93D; --green:#6BCB77; --blue:#4D96FF; --purple:#A78BFA;
  --coral-light:#FFE0E0; --yellow-light:#FFF8DC; --green-light:#E8F8EA;
  --blue-light:#E0EDFF; --purple-light:#EFE4FF;
  --coral-ink:#c62828; --yellow-ink:#f57f17; --green-ink:#2e7d32;
  --blue-ink:#1565c0; --purple-ink:#7b1fa2;

  --bg:#FAFAFA; --warm-white:#FFF9F0; --paper-card:#FFFFFF; --photo-paper:#F1EDE3;
  --text:#2D2A26; --text-muted:#5C5650; --text-faint:#8B8680;
  --line:#E5E7EB; --line-warm:#f0ece4;
  --page-cream:#F6EFE0;

  --shadow:rgba(0,0,0,0.10); --shadow-deep:rgba(0,0,0,0.20);

  --font-display:'Playpen Sans', 'Playpen Sans Fallback', cursive;
  --font-body:'Literata', 'Literata Fallback', serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --r-sm:6px; --r-md:12px; --r-lg:18px; --r-xl:24px; --r-pill:100px;

  --site-max:1200px; --content-max:720px;
  --gutter:clamp(1rem, 4vw, 3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);color:var(--text);line-height:1.6;
     font-size:17px;-webkit-font-smoothing:antialiased;
     /* clip, not hidden: hidden on <body> breaks position:sticky */
     overflow-x:clip}
img{max-width:100%;height:auto;display:block}
/* the drawn → (src/components/site/Arrow.astro): one letter wide, sitting on the baseline like the typed one */
.arrow{display:inline-block;width:1em;height:.458em;vertical-align:.132em;fill:currentColor}
/* a class that sets display beats the UA rule for [hidden], so pin it */
[hidden]{display:none !important}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;margin:0;font-weight:700}
p{margin:0}
button,input{font:inherit}

.shell{max-width:var(--site-max);margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--content-max)}

/* ---- shared bits ---- */
.eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-faint)}

.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-display);
  font-weight:700;font-size:1rem;border:2.5px solid var(--text);border-radius:var(--r-pill);
  padding:.7rem 1.4rem;background:var(--yellow);color:var(--text);cursor:pointer;
  box-shadow:3px 4px 0 var(--text);text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease}
.btn:hover{transform:translate(-2px,-3px);box-shadow:5px 7px 0 var(--text)}
.btn--coral{background:var(--coral);color:#fff}
.btn--white{background:#fff}
.btn--sm{font-size:.85rem;padding:.45rem 1rem;box-shadow:2px 3px 0 var(--text)}

.chip{display:inline-block;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--r-pill)}
.chip--website{background:var(--blue-light);color:var(--blue-ink)}
.chip--video{background:var(--coral-light);color:var(--coral-ink)}
.chip--make{background:var(--green-light);color:var(--green-ink)}
.chip--game{background:var(--purple-light);color:var(--purple-ink)}
.chip--book{background:var(--yellow-light);color:var(--yellow-ink)}
.chip--app,.chip--interactive{background:var(--yellow-light);color:var(--yellow-ink)}

.mark{background:linear-gradient(transparent 58%, var(--yellow) 58%, var(--yellow) 94%, transparent 94%);
  padding-inline:.1em}
.mark--green{background:linear-gradient(transparent 58%, var(--green) 58%, var(--green) 94%, transparent 94%)}
.mark--coral{background:linear-gradient(transparent 58%, var(--coral) 58%, var(--coral) 94%, transparent 94%)}
.mark--blue{background:linear-gradient(transparent 58%, var(--blue-light) 58%, var(--blue-light) 94%, transparent 94%)}

/* email capture, shared skeleton, skinned per direction */
.capture{display:flex;gap:.5rem;flex-wrap:wrap}
.capture input{flex:1 1 15rem;min-width:0;border:2.5px solid var(--text);border-radius:var(--r-pill);
  padding:.7rem 1.1rem;background:#fff;font-family:var(--font-body)}
.capture input:focus{outline:3px solid var(--blue);outline-offset:1px}
.fineprint{font-size:.85rem;color:var(--text-muted);margin-top:.6rem}

/* mockup chrome: a small label so we always know which direction we're in */
.mockup-flag{position:fixed;left:12px;bottom:12px;z-index:99;font-family:var(--font-mono);
  font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;background:var(--text);
  color:#fff;padding:.4rem .7rem;border-radius:var(--r-pill);text-decoration:none;opacity:.75}
.mockup-flag:hover{opacity:1}

/* /round2.css */
/* Shared pieces for round 2: white and dot-grid grounds, three header
   treatments, and the palette-forward card looks. Loaded after base.css. */

/* ---------- grounds ---------- */
.dots{
  background-color:#fff;
  background-image:radial-gradient(rgba(77,150,255,.22) 1.5px, transparent 1.6px);
  background-size:22px 22px}
.dots--tight{background-size:16px 16px}
.dots--blue{background-color:#F4F8FF}
.dots--green{background-color:#F3FBF4;background-image:radial-gradient(rgba(107,203,119,.30) 1.5px, transparent 1.6px)}
.dots--yellow{background-color:#FFFCF0;background-image:radial-gradient(rgba(245,180,30,.28) 1.5px, transparent 1.6px)}
.dots--purple{background-color:#F9F5FF;background-image:radial-gradient(rgba(167,139,250,.34) 1.5px, transparent 1.6px)}
.dots--coral{background-color:#FFF6F6;background-image:radial-gradient(rgba(255,107,107,.28) 1.5px, transparent 1.6px)}

.graph{
  background-color:#fff;
  background-image:
    linear-gradient(rgba(77,150,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,150,255,.10) 1px, transparent 1px),
    radial-gradient(rgba(77,150,255,.26) 1.6px, transparent 1.7px);
  background-size:24px 24px, 24px 24px, 96px 96px}

/* ---------- wordmark from the old site ---------- */
.wordmark{font-family:var(--font-display);font-weight:800;font-size:1.35rem;
  letter-spacing:-.01em;text-decoration:none;color:var(--text);display:inline-flex;
  align-items:baseline}
.brand-dot{display:inline-block;width:.42em;height:.42em;border-radius:50%;
  background:var(--coral);margin-left:.18em}

/* ---------- nav pills, straight from the design system ---------- */
.pill{font-family:var(--font-display);font-weight:600;font-size:.85rem;
  padding:7px 16px;border-radius:var(--r-pill);box-shadow:2px 3px 5px var(--shadow);
  transition:transform .2s, box-shadow .2s;color:var(--text);position:relative;
  text-decoration:none;display:inline-block;white-space:nowrap}
.pill::after{content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.4) 0%, transparent 50%);
  pointer-events:none}
.pill:hover{transform:rotate(0deg) scale(1.08) !important;box-shadow:3px 4px 8px var(--shadow-deep)}
.pill--green{background:var(--green);transform:rotate(-2deg)}
.pill--yellow{background:var(--yellow);transform:rotate(1deg)}
.pill--blue{background:var(--blue);color:#fff;transform:rotate(-1deg)}
.pill--coral{background:var(--coral);color:#fff;transform:rotate(2deg)}
.pill--purple{background:var(--purple);color:#fff;transform:rotate(-1deg)}

/* ---------- yellow signup note, on a white page ---------- */
.signup{background:var(--yellow);padding:1.4rem 1.35rem 1.5rem;border-radius:4px;
  box-shadow:5px 7px 0 rgba(45,42,38,.16);max-width:31rem}
.signup--tilt{transform:rotate(-1.6deg)}
.signup h2{font-size:1.2rem}
.signup .capture{margin-top:.9rem}
.signup .fineprint{color:#6b5a20}

/* ---------- palette-forward "what is inside" card ---------- */
.icards{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:1.4rem}
.ic{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:2.5px solid var(--text);
  box-shadow:5px 6px 0 var(--ic-color);transition:transform .14s ease, box-shadow .14s ease}
.ic:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--ic-color)}
.ic__art{aspect-ratio:5/3;display:grid;place-items:center;background:var(--ic-tint)}
.ic__art img{width:44%}
.ic__body{padding:.85rem 1rem 1.1rem;border-top:2.5px solid var(--text)}
.ic__name{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-weight:700;font-size:1.08rem}
.ic__name span{width:10px;height:10px;border-radius:50%;background:var(--ic-color)}
.ic p{font-size:.88rem;color:var(--text-muted);margin-top:.3rem;line-height:1.45}

/* ---------- palette-forward find card ---------- */
.findgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:1.5rem}
.fc{background:#fff;border-radius:var(--r-md);overflow:hidden;text-decoration:none;display:block;
  border:2px solid var(--text);box-shadow:4px 5px 0 var(--fc-color);
  transition:transform .14s ease, box-shadow .14s ease}
.fc:hover{transform:translate(-2px,-3px);box-shadow:6px 8px 0 var(--fc-color)}
.fc img{aspect-ratio:16/10;object-fit:cover;width:100%;background:var(--photo-paper);
  border-bottom:2px solid var(--text)}
.fc__body{padding:.8rem .9rem 1.05rem}
.fc h3{font-family:var(--font-display);font-size:.98rem;line-height:1.3;margin:.45rem 0 .3rem}
.fc p{font-size:.84rem;color:var(--text-muted);line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- project card ---------- */
.projgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:1.6rem}
.pj{background:#fff;border-radius:var(--r-lg);overflow:hidden;border:2.5px solid var(--text);
  box-shadow:5px 6px 0 var(--pj-color);transition:transform .14s ease, box-shadow .14s ease}
.pj:hover{transform:translate(-2px,-3px);box-shadow:7px 9px 0 var(--pj-color)}
.pj__photo{aspect-ratio:4/3;display:grid;place-items:center;background:var(--pj-tint);
  border-bottom:2.5px solid var(--text)}
.pj__photo img{width:44%}
.pj__photo.has-photo img{width:100%;height:100%;object-fit:cover}
.pj__body{padding:.9rem 1rem 1.2rem}
.pj h3{font-size:1.12rem;margin-top:.45rem}
.pj p{font-size:.89rem;color:var(--text-muted);margin-top:.3rem}

/* ---------- device ---------- */
.device{position:relative;background:#20242b;border-radius:26px;padding:13px;
  box-shadow:0 20px 44px rgba(30,45,80,.28), 0 2px 0 rgba(255,255,255,.18) inset}
.device__screen{border-radius:14px;overflow:hidden;background:#000;aspect-ratio:4/3}
.device__screen img{width:100%;height:100%;object-fit:cover}
.device--zoom .device__screen img{transform:scale(1.36) translateY(-3%)}
.device::after{content:'';position:absolute;right:5px;top:50%;transform:translateY(-50%);
  width:3px;height:46px;background:#3a3f47;border-radius:2px}
.float{position:absolute;filter:drop-shadow(3px 5px 7px rgba(0,0,0,.20));pointer-events:none}

/* ---------- dashed section rule from the old site ---------- */
.rule{display:flex;align-items:center;gap:1rem;margin-bottom:1.6rem}
.rule::before,.rule::after{content:'';height:0;flex:1;border-top:3px dashed var(--yellow)}
.rule h2{font-size:clamp(1.6rem,3.4vw,2.3rem);white-space:nowrap}
.rule--left::before{display:none}

/* /cards3.css */
/* Round 4 cards: borderless with a soft shadow, plus four ways to define
   the edge. Switch with a class on <body> (e1 to e4). */

.tgrid{display:grid;gap:1.5rem}
.tgrid--inside{grid-template-columns:repeat(auto-fill,minmax(235px,1fr))}
.tgrid--proj{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}
.tgrid--find{grid-template-columns:repeat(auto-fill,minmax(215px,1fr))}

.tcard{background:var(--paper-card);border-radius:var(--r-lg);overflow:hidden;
  display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;
  position:relative;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease}
.tcard__art{aspect-ratio:5/3;display:grid;place-items:center;background:var(--t);overflow:hidden}
.tcard__art img{width:44%}
.tcard--photo .tcard__art{aspect-ratio:4/3}
.tcard--photo .tcard__art img{width:100%;height:100%;object-fit:cover}
.tcard--find .tcard__art{aspect-ratio:16/10;background:var(--photo-paper)}
.tcard--find .tcard__art img{width:100%;height:100%;object-fit:cover}
/* images that lose their point when cropped: shown whole, over a blurred copy of
   themselves instead of bare paper, so the frame still reads as full-bleed */
.tcard--find.tcard--contain .tcard__art{position:relative}
.tcard--find.tcard--contain .tcard__art::before{content:'';position:absolute;inset:-12%;
  background:var(--img) center/cover no-repeat;filter:blur(18px) saturate(1.1);opacity:.85}
.tcard--find.tcard--contain .tcard__art img{position:relative;object-fit:contain}
.tcard__body{padding:.9rem 1.05rem 1.15rem;flex:1}
.tcard__name{display:flex;align-items:center;gap:.45rem;font-family:var(--font-display);
  font-weight:700;font-size:1.08rem}
.tcard__name i{width:10px;height:10px;border-radius:50%;background:var(--c);
  display:inline-block;font-style:normal;flex:0 0 auto}
.tcard__body p{font-size:.88rem;color:var(--text-muted);margin-top:.32rem;line-height:1.45}
.tcard h3{font-family:var(--font-display);font-size:1.1rem;margin-top:.45rem}
.tcard--find .tcard__body{padding:.75rem .85rem 1rem}
.tcard--find h3{font-size:.96rem;line-height:1.28;margin:.4rem 0 .28rem}
.tcard--find p{font-size:.82rem;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.tag{display:inline-block;font-family:var(--font-body);font-size:.68rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--c);color:#fff}
.tag--ink{color:var(--text)}

/* ---------------------------------------------------------------
   E1 · HAIRLINE. A 1px warm grey line all the way round. The edge is
   always readable, even where a white card meets a white ground.
   --------------------------------------------------------------- */
.e1 .tcard{border:1px solid rgba(45,42,38,.11);box-shadow:0 2px 10px rgba(45,42,38,.08)}
.e1 .tcard__art{border-bottom:1px solid rgba(45,42,38,.09)}
.e1 .tcard:hover{transform:translate(-2px,-3px);border-color:rgba(45,42,38,.18);
  box-shadow:0 8px 22px rgba(45,42,38,.14)}

/* ---------------------------------------------------------------
   E2 · INSET RING. Same idea drawn inside the card with a shadow, so
   the corner radius stays perfectly crisp and no layout width changes.
   --------------------------------------------------------------- */
.e2 .tcard{box-shadow:inset 0 0 0 1px rgba(45,42,38,.10), 0 2px 10px rgba(45,42,38,.08)}
.e2 .tcard:hover{transform:translate(-2px,-3px);
  box-shadow:inset 0 0 0 1px rgba(45,42,38,.16), 0 8px 22px rgba(45,42,38,.14)}

/* ---------------------------------------------------------------
   E3 · TINTED EDGE. The hairline takes the card's own category colour,
   heavily diluted. Definition and a little colour in one move.
   --------------------------------------------------------------- */
.e3 .tcard{border:1px solid color-mix(in srgb, var(--c) 38%, #fff);
  box-shadow:0 2px 10px rgba(45,42,38,.08)}
.e3 .tcard__art{border-bottom:1px solid color-mix(in srgb, var(--c) 30%, #fff)}
.e3 .tcard:hover{transform:translate(-2px,-3px);
  border-color:color-mix(in srgb, var(--c) 65%, #fff);
  box-shadow:0 8px 22px rgba(45,42,38,.14)}

/* ---------------------------------------------------------------
   E4 · NO LINE, TIGHTER SHADOW. Two shadows: a 1px contact shadow that
   draws the edge, and a wide soft one that floats the card.
   --------------------------------------------------------------- */
.e4 .tcard{box-shadow:0 1px 2px rgba(45,42,38,.18), 0 10px 24px rgba(45,42,38,.10)}
.e4 .tcard:hover{transform:translate(-2px,-3px);
  box-shadow:0 2px 3px rgba(45,42,38,.20), 0 16px 34px rgba(45,42,38,.16)}

/* ---------------------------------------------------------------
   SUBHEADS. The section's colour, solid, on a slight tilt. No tape.
   --------------------------------------------------------------- */
.subhead{display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(1.45rem,3.1vw,2.1rem);padding:.35rem 1.25rem;border-radius:var(--r-sm);
  transform:rotate(-1deg);background:var(--c);color:#fff;
  box-shadow:3px 4px 0 rgba(45,42,38,.16)}
.subhead--ink{color:var(--text)}

/* the switcher */
.switch{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:80;
  display:flex;gap:.45rem;align-items:center;background:rgba(255,255,255,.96);
  border-radius:var(--r-pill);padding:.45rem .6rem;box-shadow:0 4px 18px rgba(0,0,0,.20)}
.switch b{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--text-faint);padding:0 .35rem}
.switch button{font-family:var(--font-display);font-weight:700;font-size:.8rem;border:none;
  background:var(--bg);border-radius:var(--r-pill);padding:.35rem .75rem;cursor:pointer;
  color:var(--text-muted)}
.switch button:hover{background:var(--yellow-light);color:var(--text)}
.switch button.on{background:var(--yellow);color:var(--text)}
.switch .sep{width:1px;height:20px;background:var(--line);margin:0 .25rem}

/* /appsection.css */
/* Four ways to sell the app in a compact block. A and D swap a panel on
   click, B scrolls, C is a static three-up. All share the same content. */

/* ============ shared ============ */
.fx__art{display:grid;place-items:center;border-radius:var(--r-lg);background:var(--t);
  aspect-ratio:5/4;overflow:hidden}
.fx__art img{width:64%}
.fx-eyebrow{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c)}
.fx-bullets{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.fx-bullets li{display:flex;align-items:flex-start;gap:.55rem;font-size:.95rem;
  color:var(--text-muted)}
.fx-bullets li::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--c);
  flex:0 0 auto;margin-top:.42rem}

/* ============ A · TABBED CALLOUTS ============ */
.fxa__tabs{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.fxa__tab{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  border:none;background:#fff;color:var(--text-muted);border-radius:var(--r-pill);
  padding:.5rem 1.15rem;cursor:pointer;box-shadow:0 1px 3px rgba(45,42,38,.14);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease}
.fxa__tab:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(45,42,38,.18)}
.fxa__tab[aria-selected="true"]{background:var(--tc);color:#fff;
  box-shadow:0 3px 0 rgba(45,42,38,.18)}
.fxa__tab[aria-selected="true"].ink{color:var(--text)}

.fxa__panel{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);
  align-items:center;background:#fff;border-radius:var(--r-xl);
  padding:clamp(1.3rem,3vw,2.2rem);box-shadow:0 3px 16px rgba(45,42,38,.10)}
.fxa__panel h3{font-size:clamp(1.4rem,3vw,2rem);margin-top:.35rem}
.fxa__panel > *{min-width:0}
.fxa__panel p.lede{color:var(--text-muted);margin-top:.6rem;font-size:1.02rem}
.fx-in{animation:fxIn .32s ease both}
@keyframes fxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ B · CAROUSEL ============ */
.fxb{position:relative}
.fxb__rail{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:.4rem .2rem 1.2rem;scrollbar-width:none}
.fxb__rail::-webkit-scrollbar{display:none}
.fxb__card{flex:0 0 clamp(230px,26vw,290px);scroll-snap-align:start;background:#fff;
  border-radius:var(--r-lg);overflow:hidden;box-shadow:0 2px 10px rgba(45,42,38,.12);
  border:1px solid rgba(45,42,38,.07);transition:transform .16s ease, box-shadow .16s ease}
.fxb__card:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(45,42,38,.16)}
.fxb__card .fx__art{border-radius:0;aspect-ratio:5/3}
.fxb__body{padding:1rem 1.1rem 1.25rem}
.fxb__body h3{font-size:1.15rem;margin-top:.4rem}
.fxb__body p{font-size:.9rem;color:var(--text-muted);margin-top:.35rem;line-height:1.5}
.fxb__nav{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.2rem}
.fxb__nav button{width:38px;height:38px;border-radius:50%;border:none;background:#fff;
  box-shadow:0 2px 8px rgba(45,42,38,.18);cursor:pointer;font-size:1.05rem;line-height:1}
.fxb__nav button:hover{background:var(--yellow)}

/* ============ C · VALUE PILLARS ============ */
.fxc{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.6rem}
.fxc__item{padding-top:1.1rem;border-top:4px solid var(--c)}
.fxc__item h3{font-size:1.2rem;margin-top:.5rem}
.fxc__item p{color:var(--text-muted);font-size:.95rem;margin-top:.35rem}

/* ============ D · ACCORDION + GRAPHIC ============ */
.fxd{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.fxd__list{display:grid;gap:.6rem}
.fxd__row{background:#fff;border-radius:var(--r-lg);box-shadow:0 2px 8px rgba(45,42,38,.10);
  overflow:hidden;transition:box-shadow .16s ease}
.fxd__btn{width:100%;display:flex;align-items:center;gap:.7rem;background:none;border:none;
  padding:.9rem 1.1rem;cursor:pointer;font-family:var(--font-display);font-weight:700;
  font-size:1.05rem;color:var(--text);text-align:left}
.fxd__btn i{width:11px;height:11px;border-radius:50%;background:var(--c);flex:0 0 auto;
  font-style:normal}
.fxd__btn .plus{margin-left:auto;color:var(--text-faint);font-weight:400;font-size:1.2rem;
  transition:transform .2s ease}
.fxd__row.open{box-shadow:0 6px 20px rgba(45,42,38,.14)}
.fxd__row.open .plus{transform:rotate(45deg)}
.fxd__panel{display:none;padding:0 1.1rem 1.1rem 2.5rem}
.fxd__row.open .fxd__panel{display:block;animation:fxIn .26s ease both}
.fxd__panel p{color:var(--text-muted);font-size:.95rem}
.fxd__stage{position:relative}
.fxd__stage .fx__art{aspect-ratio:1/1}

@media (max-width:820px){
  .fxa__panel,.fxd{grid-template-columns:1fr}
  .fxd__stage{order:-1}
}

/* /drop.css */
/* The pile. Cards drop in one at a time as you scroll and stay where they
   land, building a deliberate arrangement.

   Two rules make it feel real:
   1. z-index is fixed per card and never changes, so no card ever passes
      through another one.
   2. Nothing fades. A card is either above the frame or on the pile.
      The only state change is a transform.

   The resting angle and offset of each card are preset per index, so the
   arrangement looks casual but lands identically every time. */

.dp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);align-items:start}
.dp__stage{position:sticky;top:var(--dp-top,96px)}
.dp__rows{display:grid}
.dp__row{min-height:var(--dp-row,66vh);display:flex;flex-direction:column;justify-content:center;
  padding:1.6rem 0;opacity:.36;transition:opacity .35s ease}
.dp__row.on{opacity:1}
/* the first block starts level with the top of the mat instead of floating
   mid-row, so text and mat begin together */
.dp__row:first-child{justify-content:flex-start;padding-top:14px}
.dp__row h3{font-size:clamp(1.5rem,3vw,2.15rem)}
.dp__row p{color:var(--text-muted);margin-top:.65rem;max-width:40ch;font-size:1.02rem}
.dp__kicker{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--c);font-weight:500}
.dp__bar{width:46px;height:5px;border-radius:3px;background:var(--c);margin-bottom:.9rem;
  transform-origin:left;transform:scaleX(.28);transition:transform .4s ease}
.dp__row.on .dp__bar{transform:scaleX(1)}
.dp__bul{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.4rem}
.dp__bul li{display:flex;gap:.55rem;align-items:flex-start;font-size:.94rem;color:var(--text-muted)}
.dp__bul li::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--c);
  flex:0 0 auto;margin-top:.42rem}

/* ---------- the pile ---------- */
.pile{position:relative;aspect-ratio:1/1;border-radius:16px;perspective:1200px}
.pile__inner{position:absolute;inset:0}

.pc{position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:80%;aspect-ratio:5/3;                       /* a 3 by 5 index card */
  border-radius:14px;background:var(--c);
  box-shadow:0 4px 10px rgba(30,25,20,.20), 0 18px 34px rgba(30,25,20,.16);
  transform:translate3d(var(--dx), var(--dy), 0) rotate(var(--rot));
  will-change:transform}
.pc__card{position:absolute;inset:10px;background:#fff;border-radius:8px;overflow:hidden;
  display:flex;box-shadow:0 2px 5px rgba(30,25,20,.18)}
.pc__art{flex:0 0 auto;height:100%;aspect-ratio:1;background:var(--paper-card)}
.pc__art img,.pc__art video{width:100%;height:100%;object-fit:cover;display:block}
.pc__meta{flex:1;min-width:0;padding:.75rem .9rem;display:flex;flex-direction:column;
  justify-content:center;
  /* faint rules, the way an index card is printed */
  background-image:repeating-linear-gradient(transparent 0 21px, rgba(77,150,255,.16) 21px 22px);
  background-position:0 6px}
.pc__name{font-family:var(--font-display);font-weight:800;font-size:1.02rem;line-height:1.2}
.pc__sub{font-size:.78rem;color:var(--text-muted);line-height:1.35;margin-top:.25rem;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* above the frame, waiting to fall. No opacity anywhere. */
.pc{visibility:visible}

/* .out = flying off, still on screen. Visibility flips only at the END of
   the flight, so you watch the whole thing leave. */
.pc.out{visibility:hidden;
  transform:translate3d(var(--dx), calc(var(--dy) - 165%), 0)
            rotate(calc(var(--rot) + var(--spin) * .9))}

/* .up = parked above the window, hidden, and moved there with no
   transition, so nothing is ever seen waiting. */
.pc.up{visibility:hidden;transition:none !important;
  transform:translate3d(var(--dx), calc(var(--dy) - 70vh - 120%), 0)
            rotate(calc(var(--rot) + var(--spin)))}

/* ---------- three drop feels ---------- */
/* spring: lands, overshoots a touch, settles */
.f-spring .pc{transition:transform .78s cubic-bezier(.16,1.3,.34,1) var(--delay,0s),
                            visibility 0s linear var(--delay,0s)}
.f-spring .pc.out{transition:transform .52s cubic-bezier(.42,0,.78,.4) var(--delay,0s),
                                visibility 0s linear calc(.52s + var(--delay,0s))}

/* soft: same drop, no overshoot */
.f-soft .pc{transition:transform .7s cubic-bezier(.2,.88,.26,1) var(--delay,0s),
                          visibility 0s linear var(--delay,0s)}
.f-soft .pc.out{transition:transform .52s cubic-bezier(.42,0,.78,.4) var(--delay,0s),
                              visibility 0s linear calc(.52s + var(--delay,0s))}

/* toss: comes in from the side with more spin */
.f-toss .pc{transition:transform .82s cubic-bezier(.16,1.26,.34,1) var(--delay,0s),
                          visibility 0s linear var(--delay,0s)}
.f-toss .pc.out{transition:transform .55s cubic-bezier(.42,0,.78,.4) var(--delay,0s),
                              visibility 0s linear calc(.55s + var(--delay,0s))}
.f-toss .pc.up{transform:translate3d(calc(var(--dx) + 120%), calc(var(--dy) - 70vh - 120%), 0)
                         rotate(calc(var(--rot) + var(--spin) * 2.4))}
.f-toss .pc.out{transform:translate3d(calc(var(--dx) + 130%), calc(var(--dy) - 105%), 0)
                          rotate(calc(var(--rot) + var(--spin) * 2.2))}

/* the pile takes the hit when a card lands */
.pile.hit .pile__inner{animation:pileHit .26s ease}
@keyframes pileHit{0%{transform:translateY(0)}35%{transform:translateY(4px)}
                   70%{transform:translateY(-1px)}100%{transform:translateY(0)}}

/* ---------- the surface the cards land on ----------
   The stage is a real panel, so on a phone the text scrolls under
   something solid instead of disappearing behind nothing. */
.mat.surf{border-radius:24px;padding:14px;
  box-shadow:0 2px 6px rgba(30,25,20,.16), 0 18px 40px rgba(30,25,20,.14)}

/* self-healing cutting mat: the craft-room surface */
.s-mat{background-color:#24443C;
  background-image:
    linear-gradient(rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:120px 120px, 120px 120px, 24px 24px, 24px 24px}

/* deep board: solid, no grid, colour only */
.s-board{background-color:#1F3350;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.5px);
  background-size:22px 22px}

/* light graph panel, the site's own paper */
.s-paper{background-color:#FBFCFE;
  background-image:
    linear-gradient(rgba(77,150,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,150,255,.16) 1px, transparent 1px),
    radial-gradient(rgba(77,150,255,.34) 1.6px, transparent 1.7px);
  background-size:24px 24px, 24px 24px, 96px 96px;
  box-shadow:0 2px 6px rgba(30,25,20,.10), 0 16px 34px rgba(30,25,20,.10)}

/* nothing: cards float on the page */
.s-none{background:none;box-shadow:none;padding:0}

@media (prefers-reduced-motion: reduce){
  .pc{transition:none}
  .pile.hit .pile__inner{animation:none}
}

@media (max-width:820px){
  .dp{grid-template-columns:1fr;gap:.6rem}
  /* an opaque white band carries the mat, so nothing shows through above
     or beside it, and the text fades out as it slides up underneath */
  .dp__stage{order:-1;position:sticky;top:0;z-index:20;background:#fff;
    margin-inline:calc(-1 * var(--gutter));padding:10px var(--gutter) 8px}
  .dp__stage::after{content:'';position:absolute;left:0;right:0;top:100%;height:26px;
    pointer-events:none;
    background:linear-gradient(#fff 0%, rgba(255,255,255,.72) 40%, rgba(255,255,255,0) 100%)}
  .mat.surf{border-radius:14px;padding:8px;
    box-shadow:0 6px 14px -8px rgba(30,25,20,.40)}
  .mat.s-none{background:#fff;box-shadow:none}
  .pile{aspect-ratio:auto;height:32vh;max-height:280px;border-radius:10px}
  .pc{width:auto;height:64%}
  /* the band is wide and short, so a sideways toss can still be on screen
     while it waits. Everything falls straight down here instead. */
  .f-toss .pc.up{transform:translate3d(var(--dx), calc(var(--dy) - 70vh - 120%), 0)
                           rotate(calc(var(--rot) + var(--spin)))}
  .dp__row{min-height:0;padding:1.3rem 0;opacity:1}
  .dp__row:first-child{padding-top:1.3rem}
  .dp__row + .dp__row{border-top:1px solid var(--line)}
}

/* /chrome.css */
/* Site chrome shared by the homepage and the about page: the real footer
   from @snacknotes/ui (dark ground, four-colour stripe, brand block plus
   link columns) and the about band. */

/* short pages (404): the footer sits at the window's bottom, longer pages push it down */
body{min-height:100vh;display:flex;flex-direction:column}
.sitefoot{margin-top:auto}
.sitefoot{background:var(--text);color:var(--warm-white);width:100%;overflow:hidden}
.sitefoot__stripe{height:6px;background:linear-gradient(90deg,
  var(--coral) 0%, var(--coral) 25%,
  var(--yellow) 25%, var(--yellow) 50%,
  var(--green) 50%, var(--green) 75%,
  var(--blue) 75%, var(--blue) 100%)}
.sitefoot__inner{max-width:var(--site-max);margin:0 auto;
  padding:clamp(2.2rem,5vw,4rem) var(--gutter) 1.6rem;
  display:flex;flex-wrap:wrap;gap:clamp(1.6rem,4vw,2.5rem)}
.sitefoot__brand{flex:2 1 280px;min-width:220px;max-width:360px}
.sitefoot__logo{font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  color:var(--warm-white);margin-bottom:.5rem;display:flex;align-items:baseline}
.sitefoot__logo .brand-dot{background:var(--coral)}
.sitefoot__blurb{font-size:.86rem;color:rgba(255,249,240,.55);line-height:1.6;max-width:300px}
.sitefoot__cta{margin-top:1.1rem}
.sitefoot__community{margin-top:1.6rem}
.sitefoot__community h2{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  color:var(--warm-white);margin:0 0 .7rem}
.sitefoot__social{display:flex;gap:.6rem}
.sitefoot__social a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,249,240,.10);color:rgba(255,249,240,.75);
  transition:background .18s ease, color .18s ease, transform .18s ease}
.sitefoot__social a:hover{background:var(--yellow);color:var(--text);transform:translateY(-2px)}
.sitefoot__social svg{width:20px;height:20px;display:block}

.sitefoot__col{flex:1 1 140px;min-width:130px}
.sitefoot__col h2{font-family:var(--font-display);font-weight:700;font-size:.95rem;
  margin-bottom:.8rem;color:var(--warm-white)}
.sitefoot__col ul{list-style:none;margin:0;padding:0}
.sitefoot__col li{margin-bottom:.5rem}
.sitefoot__col a{font-size:.86rem;color:rgba(255,249,240,.55);text-decoration:none;
  transition:color .2s ease}
.sitefoot__col a:hover{color:var(--yellow)}
.sitefoot__bar{max-width:var(--site-max);margin:0 auto;padding:1.2rem var(--gutter) 2rem;
  border-top:1px solid rgba(255,249,240,.14);display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center}
.sitefoot__bar p{font-family:var(--font-display);font-size:.95rem;color:var(--warm-white)}
.sitefoot__meta{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem}
.sitefoot__bar small{color:rgba(255,249,240,.45);font-size:.8rem}
.sitefoot__love{color:rgba(255,249,240,.68) !important}
.sitefoot__love i{color:var(--coral);font-style:normal}
@media (max-width:560px){
  .sitefoot__meta{align-items:flex-start}
}

/* ---- the note from Brian, on the homepage ----
   A large card that reads as a letter: photograph on one side, a short
   note and a signature on the other. Drop a real photo at
   assets/photos/brian-kids.jpg and it replaces the placeholder frame. */
.letterband{padding:clamp(3rem,6.5vw,4.6rem) 0;background:#F7F9FC}
.letter{background:#fff;border:1px solid rgba(45,42,38,.11);border-radius:var(--r-xl);
  overflow:hidden;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  box-shadow:0 3px 10px rgba(45,42,38,.08), 0 20px 44px rgba(45,42,38,.10);
  max-width:1040px;margin:0 auto}
.letter__photo{position:relative;min-height:clamp(320px,38vw,440px);background:#ECEEF1}
.letter__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.letter__photo img + .letter__slot{display:none}
.letter__slot{position:absolute;inset:14px;border:2px dashed rgba(45,42,38,.28);
  border-radius:var(--r-lg);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.5rem;text-align:center;padding:1.2rem}
.letter__slot span{font-size:2.2rem;line-height:1}
.letter__slot p{font-family:var(--font-display);font-size:.95rem;color:var(--text-muted);max-width:22ch}
.letter__slot small{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(45,42,38,.45)}
.letter__body{padding:clamp(1.6rem,3.6vw,3rem);display:flex;flex-direction:column;
  justify-content:center}
.letter__body .eyebrow{color:var(--coral-ink);margin-bottom:.9rem}
.letter__body h2{font-size:clamp(1.5rem,3vw,2.1rem);max-width:20ch}
.letter__body p{margin-top:1rem;font-size:1.05rem;line-height:1.7;color:var(--text-muted);
  max-width:46ch}
.letter__sign{display:flex;align-items:center;gap:.9rem;margin-top:1.6rem}
.letter__sign b{font-family:var(--font-display);font-size:1.5rem;font-weight:800;
  transform:rotate(-3deg);display:inline-block}
.letter__sign small{font-family:var(--font-body);font-size:.85rem;color:var(--text-faint)}
.letter__link{font-family:var(--font-display);font-weight:700;font-size:1rem;
  color:var(--coral-ink);text-decoration:none;margin-top:1.4rem;align-self:flex-start}
.letter__link:hover{text-decoration:underline}

@media (max-width:760px){
  .letter{grid-template-columns:1fr}
  .letter__photo{min-height:280px}
}

/* ---- the made-by banner (kept, in case a one-liner is wanted elsewhere) ---- */
.madeby{padding:clamp(1.6rem,3.5vw,2.4rem) 0;border-block:1px solid var(--line)}
.madeby__inner{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);flex-wrap:wrap}
.madeby__line{font-family:var(--font-display);font-size:clamp(1rem,1.9vw,1.22rem);
  line-height:1.5;flex:1 1 340px;min-width:0;margin:0}
.madeby__link{font-family:var(--font-display);font-weight:700;font-size:.98rem;
  color:var(--coral-ink);text-decoration:none;white-space:nowrap}
.madeby__link:hover{text-decoration:underline}
.postit.postit--sm{width:104px;padding:.55rem .6rem;transform:rotate(-4deg);
  box-shadow:3px 4px 0 rgba(45,42,38,.16)}
.postit.postit--sm .postit__doodle{font-size:1.5rem}
.postit.postit--sm p{font-size:.66rem;line-height:1.3}

@media (max-width:640px){
  .madeby__inner{flex-direction:column;text-align:center}
  .madeby__line{flex:none}
}

/* ---- about band on the homepage ---- */
.aboutband{padding:clamp(3rem,6.5vw,4.6rem) 0}
.aboutband__grid{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(1.8rem,5vw,3.4rem);align-items:center}
.aboutband h2{font-size:clamp(1.7rem,3.6vw,2.4rem);max-width:18ch}
.aboutband p{color:var(--text-muted);margin-top:.9rem;max-width:46ch;font-size:1.04rem}
.aboutband .btn{margin-top:1.5rem}

/* the post-it the whole company came off */
.postit{width:clamp(190px,24vw,250px);aspect-ratio:1;background:var(--yellow);
  padding:1.1rem;transform:rotate(-3deg);display:flex;flex-direction:column;
  justify-content:space-between;
  box-shadow:5px 7px 0 rgba(45,42,38,.16);
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(0,0,0,.05))}
.postit__doodle{font-size:2.6rem;line-height:1}
.postit p{font-family:var(--font-display);font-size:.98rem;color:var(--text);margin:0;
  line-height:1.35}
.postit small{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;
  text-transform:uppercase;color:#6b5a20}

@media (max-width:760px){
  .aboutband__grid{grid-template-columns:1fr}
}


/* ---- header, narrow tier ----------------------------------------
   The pills used to wrap onto a second row, which doubled the height of
   a sticky header and sat on top of the mat. Below 860px the header is
   one row: wordmark, beta button, menu. Everything else moves into a
   drawer. Selectors are doubled up so they beat each page's own header
   rules, which live in an inline <style>. */

.hdr__menu{display:none;appearance:none;background:transparent;
  border:1.5px solid var(--line);border-radius:9px;padding:9px 8px;cursor:pointer;
  flex-shrink:0;line-height:0}
.hdr__menu span{display:block;width:20px;height:2px;background:var(--text);
  border-radius:2px;transition:transform .2s ease, opacity .15s ease}
.hdr__menu span + span{margin-top:5px}
.hdr--open .hdr__menu span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr--open .hdr__menu span:nth-child(2){opacity:0}
.hdr--open .hdr__menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hdr__drawer{position:absolute;top:100%;left:0;right:0;display:none;
  flex-direction:column;align-items:flex-start;gap:.85rem;
  background:#fff;border-bottom:3px solid var(--yellow);
  padding:1.1rem var(--gutter) 1.3rem;
  box-shadow:0 14px 26px rgba(0,0,0,.14);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:transform .2s ease, opacity .18s ease}
.hdr--open .hdr__drawer{transform:none;opacity:1;pointer-events:auto}
.hdr__drawer a.plain{font-size:.95rem;color:var(--text-muted);text-decoration:none;
  padding-top:.2rem;border-top:1px dashed var(--line);width:100%}

@media (max-width:860px){
  .hdr .hdr__inner{flex-wrap:nowrap;gap:.7rem}
  .hdr .hdr__nav{display:none}
  .hdr .hdr__actions{margin-left:auto;gap:.6rem}
  .hdr .hdr__actions a.plain{display:none}
  .hdr .hdr__menu{display:block}
  .hdr .hdr__drawer{display:flex}
  .hdr .wordmark{font-size:1.1rem}
}

/* ---- the seasonal banner above the header (home.html): one line, one link ---- */
.topbanner{display:block;padding:.55rem var(--gutter);background:#2a2659;color:#fff3c9;
  text-decoration:none;font-size:.92rem;line-height:1.4;text-align:center}
.topbanner__pk{width:22px;height:22px;display:inline-block;vertical-align:-6px;margin-right:.35rem}
.topbanner b{color:var(--yellow);font-weight:700;white-space:nowrap;margin-left:.35rem}
.topbanner:hover b{text-decoration:underline;text-underline-offset:3px}
@media (max-width:600px){.topbanner{font-size:.84rem}}

/* ---- the PumpkinDoodler callout: a night band straight under the hero,
   the toy's own sky colours, two screenshots leaning like prints on a desk.
   Seasonal: lift the section out of home.html after Halloween. ---- */
.pkcall{background:#1d1838 radial-gradient(ellipse 55% 75% at 76% 30%, rgba(167,139,250,.30), transparent 72%);
  color:#efe9ff;padding:clamp(2.4rem,5.5vw,3.8rem) 0;overflow:hidden}
.pkcall__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(1.6rem,4vw,3.4rem);align-items:center}
.pkcall .eyebrow{color:var(--yellow);margin-bottom:.8rem}
.pkcall h2{font-size:clamp(1.7rem,3.4vw,2.5rem);line-height:1.1;max-width:16ch;color:#fff}
.pkcall__lede{margin-top:1rem;font-size:1.05rem;line-height:1.65;color:rgba(239,233,255,.84);max-width:44ch}
.pkcall .btn{margin-top:1.5rem;box-shadow:3px 4px 0 var(--purple)}
.pkcall .btn:hover{box-shadow:5px 7px 0 var(--purple)}
.pkcall__fine{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(239,233,255,.55);margin-top:1.1rem}
.pkcall__shots{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.4rem);align-items:center;
  padding:.8rem 0;text-decoration:none}
.pkcall__shots img{display:block;width:100%;border-radius:14px;border:3px solid rgba(255,255,255,.1);
  box-shadow:0 2px 4px rgba(0,0,0,.4), 0 18px 40px rgba(0,0,0,.45);transition:transform .25s ease}
.pkcall__shots img:first-child{transform:rotate(-2.5deg) translateY(10px)}
.pkcall__shots img:last-child{transform:rotate(2deg) translateY(-8px)}
.pkcall__shots:hover img:first-child{transform:rotate(-2.5deg) translateY(4px) scale(1.02)}
.pkcall__shots:hover img:last-child{transform:rotate(2deg) translateY(-14px) scale(1.02)}
@media (max-width:880px){
  .pkcall__grid{grid-template-columns:1fr}
  .pkcall h2{max-width:none}
  .pkcall__shots{max-width:560px}
}

/* /hero.css */
/* Above-the-fold treatments. Each one puts the real app screenshot inside a
   real device, and gives the device somewhere to be. */

.scene{position:relative;aspect-ratio:4/3;border-radius:var(--r-xl);overflow:hidden;
  background-color:#eee;background-position:center;background-size:cover;
  box-shadow:0 2px 8px rgba(30,25,20,.10), 0 22px 44px rgba(30,25,20,.16)}
.scene--plain{background:none;box-shadow:none;overflow:visible}

/* the device, sitting in the scene */
.dev{position:absolute;left:50%;top:50%;translate:-50% -50%;width:var(--dev-w,70%);
  background:#20242b;border-radius:20px;padding:10px;
  box-shadow:0 3px 8px rgba(20,16,12,.35), 0 26px 46px rgba(20,16,12,.34)}
.dev__screen{border-radius:11px;overflow:hidden;background:#000;aspect-ratio:4/3;position:relative}
.dev__screen img{width:100%;height:100%;object-fit:cover;transform:scale(1.36) translateY(-3%)}
/* a soft sheen across the glass, so it reads as a screen and not a picture */
.dev__screen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, rgba(255,255,255,.22) 0 18%, rgba(255,255,255,.05) 30%,
    transparent 46%)}
.dev::after{content:'';position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:3px;height:42px;background:#3a3f47;border-radius:2px}

/* the contact shadow that puts it on a surface rather than over one */
.dev--grounded::before{content:'';position:absolute;left:6%;right:6%;bottom:-6%;height:9%;
  background:radial-gradient(ellipse at center, rgba(20,16,12,.42), transparent 72%);
  filter:blur(9px);z-index:-1}

/* tilts per scene */
.dev--flat{transform:rotate(-1.2deg)}
.dev--tilt{transform:rotate(-3.4deg)}
.dev--persp{transform:perspective(1400px) rotateY(-7deg) rotateX(2.5deg) rotate(-.6deg)}

/* stickers that break the frame */
.scene .float{position:absolute;z-index:3;filter:none}
.scene .float[src*="sticker"]{filter:drop-shadow(1px 1.5px .5px rgba(20,16,12,.34))}
.scene .float[src*="note-"]{filter:drop-shadow(1px 2px 1.5px rgba(20,16,12,.22))}
.scene .float--rainbow{width:18%;top:-3%;right:2%;transform:rotate(11deg)}
.scene .float--bulb{width:17%;bottom:-2%;left:1%;transform:rotate(-9deg)}

/* taped to the page, for the paper scene */
.tape{position:absolute;z-index:4;width:15%;height:5.5%;background:rgba(255,246,214,.72);
  box-shadow:0 1px 3px rgba(0,0,0,.16)}
.tape--tl{top:14%;left:16%;transform:rotate(-28deg)}
.tape--br{bottom:14%;right:16%;transform:rotate(-24deg)}

/* lab chrome */
.lab{padding:clamp(2rem,4vw,3rem) 0 clamp(2.6rem,5vw,4rem);border-top:1px solid var(--line)}
.lab:nth-child(even){background:#F7F9FC}
.lab__label{display:flex;align-items:baseline;gap:.8rem;margin-bottom:.3rem;flex-wrap:wrap}
.lab__label h2{font-size:1.4rem}
.lab__label span.n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:#fff;background:var(--text);padding:.25rem .6rem;
  border-radius:var(--r-pill)}
.lab__note{color:var(--text-muted);font-size:.95rem;max-width:62ch;margin-bottom:2rem}
.lab__note b{color:var(--text)}

/* /herofull.css */
/* Full-bleed heroes. The whole band is the asset: a photograph or a paper
   ground edge to edge, the app hovering in it, and clutter floating around
   it that drifts a little with the pointer. */

.fhero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(540px,78vh,760px);display:grid;align-items:center;
  background-position:center;background-size:cover;
  /* the margin doodles may poke past a phone's edge; clip without changing layout */
  overflow-x:clip}
.fhero__inner{max-width:var(--site-max);margin:0 auto;width:100%;
  padding:clamp(2rem,5vw,3.5rem) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,3.4rem);align-items:center;position:relative;z-index:2}

/* a soft wash under the copy so type stays readable on a photograph */
.fhero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.92) 0 26%,
             rgba(255,255,255,.70) 42%, rgba(255,255,255,0) 62%)}
.fhero--dark .fhero__wash{background:linear-gradient(100deg, rgba(20,16,12,.72) 0 28%,
             rgba(20,16,12,.45) 46%, rgba(20,16,12,0) 66%)}
.fhero--dark, .fhero--dark .hero__lede{color:var(--warm-white)}
.fhero--dark .eyebrow{color:#cfe3ff}

.fhero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.015em}
.fhero .hero__lede{margin-top:1rem;font-size:1.08rem;color:var(--text-muted);max-width:34ch}
.fhero .signup{margin-top:1.5rem}
.fhero--dark h1{color:var(--warm-white)}
.fhero--dark .hero__lede{color:rgba(255,249,240,.86)}
.fhero--dark .eyebrow{color:#bcd7ff}

/* ---- the app, hovering ---- */
.fstage{position:relative;display:grid;place-items:center;min-height:clamp(300px,40vw,460px)}

/* The device drifts. Two wrappers rather than one, so the horizontal and
   vertical swings can run at different periods: 11s across, 7.4s up and
   down, 17s of roll. Nothing divides evenly, so the path never repeats the
   same loop and it reads as drift rather than as an orbit. */
.fbob{animation:bobX 14s ease-in-out infinite;width:min(100%,560px)}
.fbob__y{animation:bobY 9.6s ease-in-out infinite}
.fbob__r{animation:bobR 22s ease-in-out infinite}
@keyframes bobX{0%,100%{transform:translateX(-4px)} 50%{transform:translateX(4px)}}
@keyframes bobY{0%,100%{transform:translateY(-2.5px)} 50%{transform:translateY(2.5px)}}
@keyframes bobR{0%,100%{transform:rotate(-.14deg)}  50%{transform:rotate(.14deg)}}
@media (prefers-reduced-motion: reduce){
  .fbob,.fbob__y,.fbob__r{animation:none}
}
.fdev{position:relative;width:100%;
  /* a tablet, not a black rectangle: an aluminium edge catching the light,
     a dark bezel inside it, and a screen inset into that */
  --bezel:2.4%;
  background:linear-gradient(152deg, #4a5058 0%, #23262c 26%, #16181d 55%, #2c3037 100%);
  border-radius:clamp(18px,4.2%,30px);
  padding:var(--bezel);
  transform:var(--dev-tf, perspective(1600px) rotateY(-15deg) rotateX(7deg) rotate(-1.5deg));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 2px 1px rgba(255,255,255,.30),
    inset 0 -2px 2px rgba(0,0,0,.45),
    0 6px 14px rgba(20,16,12,.28),
    0 40px 70px rgba(20,16,12,.42);
  will-change:transform}
.fdev--anim{transition:transform .18s ease-out}

.fdev__screen{position:relative;border-radius:clamp(10px,2.6%,18px);overflow:hidden;background:#000;
  aspect-ratio:4/3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85), inset 0 1px 6px rgba(0,0,0,.55)}
.fdev__screen img,
.fdev__screen video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.36) translateY(-3%)}
/* the trailer is a 4:3 screen recording, same shape as the screen: show all of it */
.fdev__screen video{transform:none}
/* the glass: one broad sheen and a faint edge light down the left */
.fdev__screen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg, rgba(255,255,255,.24) 0 15%, rgba(255,255,255,.06) 28%, transparent 46%),
    linear-gradient(90deg, rgba(255,255,255,.10) 0 1.5%, transparent 4%)}

/* front camera, centred on the long edge the way a landscape tablet has it */
.fdev__cam{position:absolute;top:calc(var(--bezel) / 2);left:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:#0a0c0f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 2px rgba(255,255,255,.10)}
/* the buttons on the edge */
.fdev__btn{position:absolute;background:#3d434b;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.fdev__btn--power{right:-2px;top:22%;width:3px;height:7%}
.fdev__btn--vol{right:-2px;top:38%;width:3px;height:11%}

/* the shadow it casts on whatever is underneath */
.fdev__cast{position:absolute;left:12%;right:-2%;bottom:-10%;height:17%;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(20,16,12,.44), transparent 70%);
  filter:blur(18px)}

/* ---- floating clutter ---- */
.clutter{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.clutter img{position:absolute;width:var(--w,90px);
  left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%) rotate(var(--r,0deg))}

/* Doodles are drawn ON the paper, so they cast nothing at all. A sticker is
   stuck to it and lifts by about a millimetre, so it gets a tight edge
   shadow rather than the soft hovering one. Notes are paper on paper, a
   shade deeper. */
.clutter img{filter:none}
.clutter img[src*="sticker"]{filter:drop-shadow(1px 1.5px .5px rgba(20,16,12,.34))}
.clutter img[src*="note-"]{filter:drop-shadow(1px 2px 1.5px rgba(20,16,12,.22))}

/* ---- the doodled graph ground, no photograph at all ---- */
.fhero--graph{background-color:#fff;
  background-image:
    linear-gradient(rgba(77,150,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,150,255,.10) 1px, transparent 1px),
    radial-gradient(rgba(77,150,255,.26) 1.6px, transparent 1.7px);
  background-size:24px 24px, 24px 24px, 96px 96px}
.fhero--graph .fhero__wash{display:none}

/* a strip of tape, for the paper ground */
.ftape{position:absolute;z-index:4;width:120px;height:30px;background:rgba(255,246,214,.78);
  box-shadow:0 1px 3px rgba(0,0,0,.16);pointer-events:none}

/* lab chrome */
.flab{border-top:1px solid var(--line)}
.flab__head{padding:1.8rem 0 1.4rem}
.flab__head .lab__label{margin-bottom:.3rem}

@media (max-width:900px){
  .fhero__inner{grid-template-columns:1fr}
  .fhero__wash{background:linear-gradient(180deg, rgba(255,255,255,.90) 0 58%, rgba(255,255,255,.70) 100%)}
  .fhero--dark .fhero__wash{background:linear-gradient(180deg, rgba(20,16,12,.75) 0 58%, rgba(20,16,12,.5) 100%)}
  .clutter img{--w:64px}
}

/* /signup.css */
/* One list, one field. The address is saved on the first step; everything
   after is optional and happens in a yellow sheet that drops in. */

/* ---- what arrives when you sign up ---- */
.perks{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.5rem}
.perks li{display:flex;align-items:flex-start;gap:.6rem;font-size:.93rem;line-height:1.45}
.inked{width:22px;height:22px;flex:0 0 auto;margin-top:-.05rem;display:grid;place-items:center;
  color:currentColor;opacity:.9}
.inked svg{width:22px;height:22px;display:block}
.su__lede{font-size:.95rem;line-height:1.5;margin-top:.25rem;opacity:.85}

/* ---- the inline confirmation left behind on the page ---- */
.su__done{display:flex;gap:.8rem;align-items:flex-start;animation:suIn .28s ease both}
.su__tick{width:34px;height:34px;border-radius:50%;background:var(--green);flex:0 0 auto;
  display:grid;place-items:center}
.su__tick svg{width:17px;height:17px;color:#fff}
.su__done h4{font-family:var(--font-display);font-size:1.08rem;margin:0}
.su__done p{font-size:.9rem;opacity:.8;margin-top:.25rem;max-width:42ch}
@keyframes suIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---- the sheet ---- */
.snm{position:fixed;inset:0;z-index:200;display:grid;place-items:start center;
  padding:clamp(1rem,5vh,4rem) 1rem 2rem;overflow-y:auto}
.snm[hidden]{display:none}
.snm__scrim{position:fixed;inset:0;background:rgba(30,25,20,.55);
  animation:scrimIn .25s ease both}
@keyframes scrimIn{from{opacity:0}to{opacity:1}}

.snm__sheet{position:relative;width:min(560px,100%);background:var(--yellow);
  border-radius:4px;padding:clamp(1.5rem,4vw,2.3rem);
  box-shadow:7px 9px 0 rgba(30,25,20,.30), 0 34px 64px rgba(30,25,20,.38);
  transform:rotate(-1.6deg);
  background-image:linear-gradient(160deg, rgba(255,255,255,.35), rgba(0,0,0,.04));
  animation:sheetDrop .58s cubic-bezier(.16,1.3,.34,1) both}
@keyframes sheetDrop{
  from{transform:translateY(-60px) rotate(-4deg) scale(.94);opacity:0}
  to{transform:translateY(0) rotate(-1.6deg) scale(1);opacity:1}}

.snm__doodle{position:absolute;left:clamp(1.5rem,4vw,2.3rem);top:-18px;font-size:2rem;
  line-height:1;transform:rotate(-8deg);filter:drop-shadow(2px 3px 3px rgba(30,25,20,.25));
  pointer-events:none}

.snm__x{position:absolute;top:10px;right:12px;width:32px;height:32px;border:none;
  border-radius:50%;background:rgba(45,42,38,.10);cursor:pointer;font-size:1.15rem;
  line-height:1;color:var(--text)}
.snm__x:hover{background:rgba(45,42,38,.20)}

.snm h3{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.6rem);
  max-width:22ch;padding-right:1.6rem}
.snm__lede{font-size:.98rem;line-height:1.55;margin-top:.5rem;color:#5c4f18}
.snm .capture{margin-top:1.1rem}
.snm .fineprint{color:#6b5a20}

/* ---- the questions ---- */
.snm__opts{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.snm__opt{display:flex;align-items:flex-start;gap:.65rem;background:rgba(255,255,255,.62);
  border:2px solid transparent;border-radius:10px;padding:.6rem .75rem;cursor:pointer;
  font-size:.95rem;line-height:1.4;transition:background .15s ease, border-color .15s ease}
.snm__opt:hover{background:rgba(255,255,255,.85)}
.snm__opt input{position:absolute;opacity:0;pointer-events:none}
.snm__box{width:20px;height:20px;border-radius:6px;background:#fff;flex:0 0 auto;
  border:2px solid rgba(45,42,38,.25);display:grid;place-items:center;margin-top:.05rem;
  transition:background .15s ease, border-color .15s ease}
.snm__box svg{width:12px;height:12px;color:#fff;opacity:0;transition:opacity .15s ease}
.snm__opt input:checked + .snm__box{background:var(--green);border-color:var(--green)}
.snm__opt input:checked + .snm__box svg{opacity:1}
.snm__opt:has(input:checked){background:#fff;border-color:var(--text)}

.snm__label{display:block;font-family:var(--font-display);font-weight:700;font-size:.95rem;
  margin:1.2rem 0 .5rem}

/* age and interest answers are chips, so three questions still fit on one
   sheet without it turning into a form */
.snm__chips{display:flex;flex-wrap:wrap;gap:.4rem}
.snm__chip{display:inline-flex;align-items:center;gap:.35rem;background:rgba(255,255,255,.62);
  border:2px solid transparent;border-radius:var(--r-pill);padding:.35rem .8rem;cursor:pointer;
  font-size:.9rem;line-height:1.3;transition:background .15s ease, border-color .15s ease,
  transform .12s ease}
.snm__chip:hover{background:rgba(255,255,255,.9);transform:translateY(-1px)}
.snm__chip input{position:absolute;opacity:0;pointer-events:none}
.snm__chiptick{width:0;overflow:hidden;display:grid;place-items:center;
  transition:width .15s ease}
.snm__chiptick svg{width:11px;height:11px;color:var(--green-ink)}
.snm__chip:has(input:checked){background:#fff;border-color:var(--text)}
.snm__chip:has(input:checked) .snm__chiptick{width:13px}
.snm textarea{width:100%;min-height:84px;border:2px solid rgba(45,42,38,.22);border-radius:10px;
  padding:.7rem .8rem;font-family:var(--font-body);font-size:.94rem;background:#fff;resize:vertical}
.snm textarea:focus{outline:3px solid var(--blue);outline-offset:1px}

.snm__row{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.3rem}
.snm__skip{font-size:.9rem;color:#6b5a20;text-decoration:underline;cursor:pointer;
  background:none;border:none;font-family:var(--font-body)}

.snm__thanks{display:flex;gap:.9rem;align-items:flex-start}
.snm__thanks h3{padding-right:0}
.snm__thanks p{font-size:.96rem;line-height:1.6;margin-top:.4rem;color:#5c4f18}

@media (prefers-reduced-motion: reduce){
  .snm__sheet{animation:none;transform:rotate(-1.6deg)}
  .snm__scrim{animation:none}
}

/* honeypot: a field no person sees; bots fill it and get a polite nothing */
.capture .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.capture{position:relative}
.su__error{margin-top:.6rem;font-size:.9rem;color:var(--coral-ink,#9a2f22)}

/* follow along, at the end of the flow */
.snm__follow{margin-top:1.1rem;padding-top:.9rem;border-top:1px dashed rgba(45,42,38,.3)}
.snm__follow p{font-size:.92rem;margin:0 0 .45rem}
.snm__follow ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem .9rem}
.snm__follow a{font-family:var(--font-display);font-size:.92rem;color:inherit;text-decoration:none;border-bottom:2px solid rgba(45,42,38,.35)}
.snm__follow a:hover{border-color:var(--coral)}
.snm__follow--compact{margin-top:.8rem;padding-top:.7rem}
.snm__follow--compact p{font-size:.85rem}