/* Joy Chaser extras, shared by every page (homepage included). Built by extras-src/build_extras.py,
   which fills in the double-brace art placeholders (torn-paper masks + confetti tile) from make_art.py.
   F = page colors · G = torn-paper bands · H = "chase joy." strip · I = shapes around titles · J = confetti
   K = card stickers · L = back to top · M = favorites + filter counts · N = sticky mini bar · O = Joy Wall counter + confetti
   P = Contact quick topics */

/* ---------- F. every page wears its own color (the same color as its menu item) ---------- */
body.pg-home      { --pc: var(--coral);   --pc-t: #CF5A3F; }
body.pg-creative  { --pc: var(--orange);  --pc-t: var(--t-orange); }
body.pg-shop      { --pc: var(--purple);  --pc-t: var(--t-purple); }
body.pg-resources { --pc: var(--violet);  --pc-t: var(--t-violet); }
body.pg-community { --pc: var(--pink);    --pc-t: var(--t-pink); }
body.pg-local     { --pc: var(--teal);    --pc-t: var(--t-teal); }
body.pg-about     { --pc: var(--coral);   --pc-t: var(--t-coral); }
body.pg-contact   { --pc: var(--mustard); --pc-t: var(--t-mustard); }
html[data-theme="dark"] body.pg-home { --pc-t: #F5A898; }
html body[class*="pg-"]:not(.pg-home) h1 .script { color: var(--pc-t); }
html body[class*="pg-"] .hblob-1 { background: var(--pc); }
html[data-theme] body[class*="pg-"]:not(.pg-home) > nav { border-bottom-color: color-mix(in srgb, var(--pc) 70%, transparent); }
html body[class*="pg-"] .back-link:hover { color: var(--pc-t); }

/* ---------- G. torn-paper bands ---------- */
.jx-torn {
  position: absolute; left: -2%; right: -2%; bottom: -6px; height: 22px; z-index: 3; pointer-events: none;
  background: var(--pc, var(--coral));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 30" preserveAspectRatio="none"%3E%3Cpath d="M0.0 3.4 L14.1 2.8 L28.1 1.1 L38.8 4.8 L58.5 0.5 L73.9 0.3 L84.9 3.9 L98.2 0.1 L109.9 6.7 L125.5 7.7 L141.1 3.1 L153.7 4.0 L172.0 6.0 L180.5 4.2 L192.6 1.7 L212.8 2.4 L226.8 5.7 L241.3 6.8 L251.2 5.9 L268.2 8.3 L278.7 0.5 L290.9 4.5 L304.5 0.6 L322.5 1.1 L337.9 1.1 L346.9 8.3 L362.2 1.3 L376.4 4.8 L391.2 1.3 L402.8 3.9 L418.1 1.3 L432.4 2.0 L448.7 6.3 L461.0 3.6 L475.9 5.8 L487.5 5.2 L506.5 5.5 L519.9 1.1 L535.6 1.2 L545.4 3.6 L563.7 6.1 L572.1 4.2 L586.3 3.6 L598.6 4.3 L618.8 3.4 L633.3 1.7 L642.2 0.1 L655.4 0.4 L669.1 3.4 L689.8 5.3 L700.7 4.1 L710.1 6.1 L731.7 4.2 L741.9 8.3 L760.0 1.9 L771.9 8.0 L785.6 4.4 L796.8 5.5 L815.0 5.4 L828.9 4.7 L839.1 3.7 L850.6 3.7 L871.0 6.0 L883.9 2.3 L898.7 2.6 L906.2 8.7 L921.8 2.9 L938.9 3.0 L948.1 1.5 L963.6 4.1 L981.3 5.4 L992.6 5.4 L1007.4 1.2 L1025.0 5.5 L1034.5 3.5 L1052.7 7.8 L1067.6 4.3 L1077.6 1.0 L1091.3 1.3 L1104.5 3.0 L1119.6 5.9 L1137.0 6.1 L1148.6 8.6 L1158.2 4.7 L1172.2 7.6 L1187.1 1.4 L1186.2 24.1 L1177.6 26.1 L1161.1 26.8 L1149.3 28.0 L1137.6 28.6 L1121.1 22.7 L1105.8 22.8 L1093.8 27.6 L1080.1 25.8 L1067.2 27.6 L1052.2 25.5 L1034.1 25.2 L1022.0 26.4 L1009.0 24.8 L996.4 20.8 L980.1 29.0 L965.2 25.6 L949.5 24.9 L934.1 26.4 L924.1 27.2 L912.1 27.2 L892.5 29.4 L885.9 25.0 L865.5 29.1 L854.1 22.0 L836.8 29.6 L827.5 27.0 L812.0 29.3 L801.3 25.9 L780.1 25.9 L767.0 25.3 L758.7 29.4 L743.8 23.1 L731.1 24.0 L717.4 28.1 L703.2 25.1 L683.9 24.9 L674.8 26.8 L659.1 28.8 L644.2 27.5 L629.5 26.8 L614.0 22.2 L603.8 29.4 L586.8 28.1 L571.8 23.3 L562.2 29.2 L546.9 28.9 L531.8 24.6 L517.5 29.2 L502.2 24.5 L489.3 22.1 L477.5 27.1 L464.4 27.6 L451.8 29.8 L434.0 26.8 L420.6 26.9 L408.8 28.8 L394.8 27.7 L378.5 24.9 L365.1 25.6 L350.2 23.2 L339.6 27.0 L323.5 25.0 L308.1 23.5 L296.3 28.0 L282.4 29.6 L262.2 27.1 L252.4 22.4 L236.8 24.9 L222.6 25.3 L213.8 24.1 L193.7 25.7 L184.5 25.7 L169.2 27.2 L156.4 24.7 L139.0 24.5 L125.6 29.2 L115.5 29.5 L100.3 27.6 L84.9 26.9 L68.8 28.4 L57.7 22.3 L39.4 27.1 L29.5 24.2 L15.2 26.2 L0.0 21.7 Z"/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 30" preserveAspectRatio="none"%3E%3Cpath d="M0.0 3.4 L14.1 2.8 L28.1 1.1 L38.8 4.8 L58.5 0.5 L73.9 0.3 L84.9 3.9 L98.2 0.1 L109.9 6.7 L125.5 7.7 L141.1 3.1 L153.7 4.0 L172.0 6.0 L180.5 4.2 L192.6 1.7 L212.8 2.4 L226.8 5.7 L241.3 6.8 L251.2 5.9 L268.2 8.3 L278.7 0.5 L290.9 4.5 L304.5 0.6 L322.5 1.1 L337.9 1.1 L346.9 8.3 L362.2 1.3 L376.4 4.8 L391.2 1.3 L402.8 3.9 L418.1 1.3 L432.4 2.0 L448.7 6.3 L461.0 3.6 L475.9 5.8 L487.5 5.2 L506.5 5.5 L519.9 1.1 L535.6 1.2 L545.4 3.6 L563.7 6.1 L572.1 4.2 L586.3 3.6 L598.6 4.3 L618.8 3.4 L633.3 1.7 L642.2 0.1 L655.4 0.4 L669.1 3.4 L689.8 5.3 L700.7 4.1 L710.1 6.1 L731.7 4.2 L741.9 8.3 L760.0 1.9 L771.9 8.0 L785.6 4.4 L796.8 5.5 L815.0 5.4 L828.9 4.7 L839.1 3.7 L850.6 3.7 L871.0 6.0 L883.9 2.3 L898.7 2.6 L906.2 8.7 L921.8 2.9 L938.9 3.0 L948.1 1.5 L963.6 4.1 L981.3 5.4 L992.6 5.4 L1007.4 1.2 L1025.0 5.5 L1034.5 3.5 L1052.7 7.8 L1067.6 4.3 L1077.6 1.0 L1091.3 1.3 L1104.5 3.0 L1119.6 5.9 L1137.0 6.1 L1148.6 8.6 L1158.2 4.7 L1172.2 7.6 L1187.1 1.4 L1186.2 24.1 L1177.6 26.1 L1161.1 26.8 L1149.3 28.0 L1137.6 28.6 L1121.1 22.7 L1105.8 22.8 L1093.8 27.6 L1080.1 25.8 L1067.2 27.6 L1052.2 25.5 L1034.1 25.2 L1022.0 26.4 L1009.0 24.8 L996.4 20.8 L980.1 29.0 L965.2 25.6 L949.5 24.9 L934.1 26.4 L924.1 27.2 L912.1 27.2 L892.5 29.4 L885.9 25.0 L865.5 29.1 L854.1 22.0 L836.8 29.6 L827.5 27.0 L812.0 29.3 L801.3 25.9 L780.1 25.9 L767.0 25.3 L758.7 29.4 L743.8 23.1 L731.1 24.0 L717.4 28.1 L703.2 25.1 L683.9 24.9 L674.8 26.8 L659.1 28.8 L644.2 27.5 L629.5 26.8 L614.0 22.2 L603.8 29.4 L586.8 28.1 L571.8 23.3 L562.2 29.2 L546.9 28.9 L531.8 24.6 L517.5 29.2 L502.2 24.5 L489.3 22.1 L477.5 27.1 L464.4 27.6 L451.8 29.8 L434.0 26.8 L420.6 26.9 L408.8 28.8 L394.8 27.7 L378.5 24.9 L365.1 25.6 L350.2 23.2 L339.6 27.0 L323.5 25.0 L308.1 23.5 L296.3 28.0 L282.4 29.6 L262.2 27.1 L252.4 22.4 L236.8 24.9 L222.6 25.3 L213.8 24.1 L193.7 25.7 L184.5 25.7 L169.2 27.2 L156.4 24.7 L139.0 24.5 L125.6 29.2 L115.5 29.5 L100.3 27.6 L84.9 26.9 L68.8 28.4 L57.7 22.3 L39.4 27.1 L29.5 24.2 L15.2 26.2 L0.0 21.7 Z"/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x;
  rotate: -.6deg;
}
.jx-torn-top { top: -8px; bottom: auto; rotate: .5deg; }
html body[class*="pg-"] :is(.page-head, .page-header)::after { display: none; }   /* torn strip replaces the old curve */
html[data-theme="dark"] body[class*="pg-"] .site-footer { border-top: 0; }
html[data-theme="dark"] body.pg-home > footer { border-top: 0; }
body.pg-home > footer { position: relative; }
.jx-cap { display: block; height: 18px; margin-bottom: -1px; background: var(--tc, var(--coral)); position: relative; z-index: 2;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"%3E%3Cpath d="M0.0 6.6 L10.4 3.6 L24.8 3.4 L42.4 8.2 L56.5 8.7 L72.5 5.7 L86.1 12.2 L95.3 14.0 L112.0 1.5 L129.6 0.5 L140.8 4.7 L155.2 2.6 L169.7 2.6 L180.0 0.1 L198.0 9.8 L212.0 8.1 L227.6 14.3 L237.4 13.9 L249.9 8.8 L267.8 8.4 L282.5 8.8 L295.0 1.0 L304.4 1.8 L321.5 1.1 L334.1 4.1 L352.2 3.8 L367.6 9.0 L374.9 2.1 L393.0 7.1 L407.5 2.4 L421.1 5.3 L432.0 1.7 L451.0 8.2 L460.2 9.3 L472.8 5.6 L486.7 0.7 L505.0 5.0 L515.7 4.3 L534.7 6.7 L548.5 9.6 L557.7 6.9 L576.5 2.3 L591.9 5.9 L604.0 4.9 L615.0 3.8 L626.6 13.7 L643.9 12.0 L660.2 2.7 L673.3 10.2 L687.8 10.6 L697.1 2.5 L712.9 6.5 L728.6 12.8 L745.3 8.5 L754.4 7.2 L773.5 3.6 L782.9 2.2 L797.2 3.3 L812.5 1.8 L828.7 4.9 L842.1 1.6 L850.2 2.5 L868.5 4.9 L884.4 5.9 L898.3 12.0 L911.9 9.4 L925.1 0.8 L939.2 13.0 L954.1 2.0 L965.2 6.9 L981.4 8.7 L995.8 4.8 L1007.3 8.2 L1024.8 6.0 L1039.1 7.5 L1050.2 5.8 L1063.4 7.2 L1079.9 1.3 L1089.3 3.4 L1104.3 3.8 L1118.5 0.5 L1136.2 12.5 L1147.7 0.6 L1158.3 8.2 L1173.7 10.0 L1190.8 6.5 L1200.0 20.0 L0.0 20.0 Z"/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"%3E%3Cpath d="M0.0 6.6 L10.4 3.6 L24.8 3.4 L42.4 8.2 L56.5 8.7 L72.5 5.7 L86.1 12.2 L95.3 14.0 L112.0 1.5 L129.6 0.5 L140.8 4.7 L155.2 2.6 L169.7 2.6 L180.0 0.1 L198.0 9.8 L212.0 8.1 L227.6 14.3 L237.4 13.9 L249.9 8.8 L267.8 8.4 L282.5 8.8 L295.0 1.0 L304.4 1.8 L321.5 1.1 L334.1 4.1 L352.2 3.8 L367.6 9.0 L374.9 2.1 L393.0 7.1 L407.5 2.4 L421.1 5.3 L432.0 1.7 L451.0 8.2 L460.2 9.3 L472.8 5.6 L486.7 0.7 L505.0 5.0 L515.7 4.3 L534.7 6.7 L548.5 9.6 L557.7 6.9 L576.5 2.3 L591.9 5.9 L604.0 4.9 L615.0 3.8 L626.6 13.7 L643.9 12.0 L660.2 2.7 L673.3 10.2 L687.8 10.6 L697.1 2.5 L712.9 6.5 L728.6 12.8 L745.3 8.5 L754.4 7.2 L773.5 3.6 L782.9 2.2 L797.2 3.3 L812.5 1.8 L828.7 4.9 L842.1 1.6 L850.2 2.5 L868.5 4.9 L884.4 5.9 L898.3 12.0 L911.9 9.4 L925.1 0.8 L939.2 13.0 L954.1 2.0 L965.2 6.9 L981.4 8.7 L995.8 4.8 L1007.3 8.2 L1024.8 6.0 L1039.1 7.5 L1050.2 5.8 L1063.4 7.2 L1079.9 1.3 L1089.3 3.4 L1104.3 3.8 L1118.5 0.5 L1136.2 12.5 L1147.7 0.6 L1158.3 8.2 L1173.7 10.0 L1190.8 6.5 L1200.0 20.0 L0.0 20.0 Z"/%3E%3C/svg%3E") 0 0 / 1200px 100% repeat-x; }
.jx-cap-down { margin: -1px 0 0; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"%3E%3Cpath d="M0.0 0.0 L1200.0 0.0 L1189.2 15.5 L1173.0 19.4 L1160.4 13.2 L1149.9 11.9 L1130.4 17.1 L1119.5 15.3 L1109.2 14.9 L1091.3 12.3 L1082.0 15.6 L1066.1 13.8 L1049.3 15.8 L1039.7 18.7 L1018.3 14.2 L1008.5 17.6 L991.4 14.9 L977.1 15.8 L962.1 12.8 L951.1 13.4 L936.5 14.1 L927.9 10.0 L906.6 15.1 L898.6 14.8 L885.2 17.4 L865.0 14.6 L857.9 11.8 L840.5 15.0 L829.2 18.8 L809.0 15.8 L801.4 17.0 L784.6 9.7 L767.6 14.4 L753.6 12.5 L742.1 11.1 L725.1 15.5 L714.4 11.9 L697.3 14.5 L688.3 15.4 L668.9 14.1 L656.6 19.8 L645.3 12.9 L631.6 8.8 L615.3 17.0 L604.6 13.1 L588.1 16.2 L570.6 8.8 L557.3 9.8 L546.7 12.5 L529.4 13.6 L514.8 10.2 L506.6 17.0 L490.5 11.5 L477.9 18.2 L463.3 16.5 L446.4 15.1 L432.3 14.5 L422.4 5.6 L405.7 14.9 L393.7 9.0 L379.2 12.5 L363.7 8.9 L351.5 16.8 L335.7 9.3 L320.5 17.2 L305.3 15.3 L291.7 6.5 L283.3 16.2 L264.4 12.3 L255.6 15.8 L234.8 13.6 L220.7 12.6 L212.6 20.0 L193.2 15.2 L185.9 14.3 L171.0 17.7 L151.3 18.6 L141.7 12.8 L125.8 19.9 L113.3 11.1 L98.1 15.3 L86.4 5.9 L67.8 15.7 L56.4 16.9 L45.1 17.7 L30.5 15.1 L16.1 18.4 L0.0 18.3 Z"/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 20" preserveAspectRatio="none"%3E%3Cpath d="M0.0 0.0 L1200.0 0.0 L1189.2 15.5 L1173.0 19.4 L1160.4 13.2 L1149.9 11.9 L1130.4 17.1 L1119.5 15.3 L1109.2 14.9 L1091.3 12.3 L1082.0 15.6 L1066.1 13.8 L1049.3 15.8 L1039.7 18.7 L1018.3 14.2 L1008.5 17.6 L991.4 14.9 L977.1 15.8 L962.1 12.8 L951.1 13.4 L936.5 14.1 L927.9 10.0 L906.6 15.1 L898.6 14.8 L885.2 17.4 L865.0 14.6 L857.9 11.8 L840.5 15.0 L829.2 18.8 L809.0 15.8 L801.4 17.0 L784.6 9.7 L767.6 14.4 L753.6 12.5 L742.1 11.1 L725.1 15.5 L714.4 11.9 L697.3 14.5 L688.3 15.4 L668.9 14.1 L656.6 19.8 L645.3 12.9 L631.6 8.8 L615.3 17.0 L604.6 13.1 L588.1 16.2 L570.6 8.8 L557.3 9.8 L546.7 12.5 L529.4 13.6 L514.8 10.2 L506.6 17.0 L490.5 11.5 L477.9 18.2 L463.3 16.5 L446.4 15.1 L432.3 14.5 L422.4 5.6 L405.7 14.9 L393.7 9.0 L379.2 12.5 L363.7 8.9 L351.5 16.8 L335.7 9.3 L320.5 17.2 L305.3 15.3 L291.7 6.5 L283.3 16.2 L264.4 12.3 L255.6 15.8 L234.8 13.6 L220.7 12.6 L212.6 20.0 L193.2 15.2 L185.9 14.3 L171.0 17.7 L151.3 18.6 L141.7 12.8 L125.8 19.9 L113.3 11.1 L98.1 15.3 L86.4 5.9 L67.8 15.7 L56.4 16.9 L45.1 17.7 L30.5 15.1 L16.1 18.4 L0.0 18.3 Z"/%3E%3C/svg%3E"); }

/* ---------- H. "chase joy." strip above every footer ---------- */
.jx-marquee { background: var(--ink); overflow: hidden; padding: 1.1rem 0; transform: rotate(-1.2deg); margin: 3rem -2% -1.6rem; position: relative; z-index: 4; }
html[data-theme="dark"] .jx-marquee { background: #0A0809; border-top: 3px solid var(--pc, var(--coral)); border-bottom: 3px solid var(--pc, var(--coral)); }
.jx-marquee-track { display: inline-flex; animation: jx-scroll 28s linear infinite; white-space: nowrap; }
.jx-marquee-item { flex: none; display: inline-flex; align-items: center; gap: 1.6rem; padding-right: 1.6rem; font: 400 2rem/1 var(--script); }
.jx-marquee-item img { width: 30px; height: auto; }
@keyframes jx-scroll { to { transform: translateX(-50%); } }
body[class*="pg-"] .jx-marquee + .site-footer { margin-top: 0; padding-top: 5.5rem; }

/* ---------- I. logo shapes around each page title ---------- */
.jx-hs { z-index: 1; height: auto; }
.jx-hs1 { left: max(2%, calc(50% - 590px)); top: 16%; width: 104px; rotate: -12deg; }
.jx-hs2 { right: max(3%, calc(50% - 500px)); top: 14%; width: 92px; rotate: 14deg; }
.jx-hs3 { left: max(9%, calc(50% - 420px)); bottom: 18%; width: 80px; rotate: 8deg; }
.about-hero .jx-hs1 { left: max(2%, calc(50% - 620px)); top: 7%; }
.about-hero .jx-hs2 { right: max(2%, calc(50% - 600px)); top: 8%; }
.about-hero .jx-hs3 { left: max(22%, calc(50% - 300px)); bottom: 7%; }
@media (max-width: 600px) {
  .jx-hs1 { left: -22px; top: 12px; width: 74px; }
  .jx-hs2 { right: -18px; top: 10px; width: 64px; }
  .about-hero .jx-hs1 { left: -22px; top: 10px; }
  .about-hero .jx-hs2 { right: -18px; top: 10px; }
}

/* ---------- J. confetti in the background ---------- */
html[data-theme] body[class*="pg-"] { background-image: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="600" height="600"%3E%3Cg opacity="0.38"%3E%3Ccircle cx="38" cy="407" r="2.2" fill="%23625BD1"/%3E%3Ccircle cx="50" cy="424" r="3.5" fill="%23625BD1"/%3E%3Ccircle cx="49" cy="411" r="3.8" fill="%23625BD1"/%3E%3Ccircle cx="33" cy="419" r="3.2" fill="%23625BD1"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23EB5E26" stroke-width="3.2" stroke-linecap="round" transform="translate%28534 67%29 rotate%2847%29"/%3E%3Cpath d="M0 -8.623821488470318 L7.8 6.0 L-7.3 5.2 Z" fill="%2376AF9B" transform="translate%28344 273%29 rotate%2888%29" stroke-linejoin="round" stroke="%2376AF9B" stroke-width="2"/%3E%3Cpath d="M0 -10.46138453429598 L9.4 7.3 L-8.9 6.3 Z" fill="%23EB5E26" transform="translate%2846 529%29 rotate%28191%29" stroke-linejoin="round" stroke="%23EB5E26" stroke-width="2"/%3E%3Cpath d="M0 -9.49208976116876 L8.5 6.6 L-8.1 5.7 Z" fill="%23DD85CF" transform="translate%28144 188%29 rotate%28323%29" stroke-linejoin="round" stroke="%23DD85CF" stroke-width="2"/%3E%3Cpath d="M0 -11.295032654801346 L10.2 7.9 L-9.6 6.8 Z" fill="%23DD85CF" transform="translate%28552 577%29 rotate%28316%29" stroke-linejoin="round" stroke="%23DD85CF" stroke-width="2"/%3E%3Cpath d="M0 -9.362448573709898 L8.4 6.6 L-8.0 5.6 Z" fill="%2376AF9B" transform="translate%28412 44%29 rotate%28302%29" stroke-linejoin="round" stroke="%2376AF9B" stroke-width="2"/%3E%3Ccircle cx="120" cy="532" r="3.4" fill="%23625BD1"/%3E%3Ccircle cx="184" cy="495" r="3.7" fill="%2376AF9B"/%3E%3Ccircle cx="245" cy="114" r="3.1" fill="%23EB5E26"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23EB5E26" stroke-width="3.2" stroke-linecap="round" transform="translate%28181 169%29 rotate%28238%29"/%3E%3Cpath d="M0 -8.129758517326222 L7.3 5.7 L-6.9 4.9 Z" fill="%2376AF9B" transform="translate%28352 143%29 rotate%28322%29" stroke-linejoin="round" stroke="%2376AF9B" stroke-width="2"/%3E%3Cpath d="M0 -9.64148995555237 L8.7 6.7 L-8.2 5.8 Z" fill="%23DD85CF" transform="translate%2887 397%29 rotate%28354%29" stroke-linejoin="round" stroke="%23DD85CF" stroke-width="2"/%3E%3Ccircle cx="325" cy="26" r="2.6" fill="%23625BD1"/%3E%3Ccircle cx="324" cy="30" r="2.6" fill="%23625BD1"/%3E%3Ccircle cx="319" cy="29" r="4.0" fill="%23625BD1"/%3E%3Ccircle cx="593" cy="29" r="2.4" fill="%23DD85CF"/%3E%3Ccircle cx="333" cy="384" r="3.9" fill="%2376AF9B"/%3E%3Ccircle cx="398" cy="310" r="3.5" fill="%23625BD1"/%3E%3Cpath d="M0 -9.44558872819539 L8.5 6.6 L-8.0 5.7 Z" fill="%23DCE4D9" transform="translate%28328 159%29 rotate%28285%29" stroke-linejoin="round" stroke="%23DCE4D9" stroke-width="2"/%3E%3Cpath d="M0 -11.85316580961345 L10.7 8.3 L-10.1 7.1 Z" fill="%23DD85CF" transform="translate%28138 346%29 rotate%2894%29" stroke-linejoin="round" stroke="%23DD85CF" stroke-width="2"/%3E%3Ccircle cx="40" cy="268" r="3.0" fill="%23E8B22B"/%3E%3Ccircle cx="35" cy="277" r="2.2" fill="%23E8B22B"/%3E%3Ccircle cx="50" cy="272" r="3.2" fill="%23E8B22B"/%3E%3Ccircle cx="47" cy="264" r="2.3" fill="%23E8B22B"/%3E%3Ccircle cx="197" cy="35" r="3.4" fill="%2376AF9B"/%3E%3Ccircle cx="191" cy="32" r="2.5" fill="%2376AF9B"/%3E%3Ccircle cx="190" cy="38" r="3.3" fill="%2376AF9B"/%3E%3Cpath d="M0 -11.852680711344188 L10.7 8.3 L-10.1 7.1 Z" fill="%23DD85CF" transform="translate%28274 193%29 rotate%28131%29" stroke-linejoin="round" stroke="%23DD85CF" stroke-width="2"/%3E%3C/g%3E%3C/svg%3E"); background-size: 600px 600px; }
html[data-theme="dark"] body[class*="pg-"] { background-image: url("data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="600" height="600"%3E%3Cg opacity="0.3"%3E%3Cpath d="M0 -10.723018931423136 L9.7 7.5 L-9.1 6.4 Z" fill="%23EB5E26" transform="translate%2834 294%29 rotate%28216%29" stroke-linejoin="round" stroke="%23EB5E26" stroke-width="2"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23F19481" stroke-width="3.2" stroke-linecap="round" transform="translate%28313 582%29 rotate%2887%29"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%2376AF9B" stroke-width="3.2" stroke-linecap="round" transform="translate%2892 238%29 rotate%28170%29"/%3E%3Ccircle cx="569" cy="395" r="3.9" fill="%23DCE4D9"/%3E%3Cpath d="M0 -11.906246882794903 L10.7 8.3 L-10.1 7.1 Z" fill="%23E8B22B" transform="translate%28253 60%29 rotate%28131%29" stroke-linejoin="round" stroke="%23E8B22B" stroke-width="2"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23DD85CF" stroke-width="3.2" stroke-linecap="round" transform="translate%28364 33%29 rotate%28211%29"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23EB5E26" stroke-width="3.2" stroke-linecap="round" transform="translate%28438 339%29 rotate%28318%29"/%3E%3Cpath d="M0 -7.246249147332916 L6.5 5.1 L-6.2 4.3 Z" fill="%23EB5E26" transform="translate%28113 509%29 rotate%2877%29" stroke-linejoin="round" stroke="%23EB5E26" stroke-width="2"/%3E%3Cpath d="M0 -8.018221989282281 L7.2 5.6 L-6.8 4.8 Z" fill="%23EB5E26" transform="translate%28253 153%29 rotate%28198%29" stroke-linejoin="round" stroke="%23EB5E26" stroke-width="2"/%3E%3Ccircle cx="139" cy="290" r="2.5" fill="%2376AF9B"/%3E%3Ccircle cx="132" cy="271" r="3.5" fill="%2376AF9B"/%3E%3Ccircle cx="131" cy="276" r="2.0" fill="%2376AF9B"/%3E%3Ccircle cx="127" cy="276" r="2.9" fill="%2376AF9B"/%3E%3Cpath d="M0 -10.640371521436844 L9.6 7.4 L-9.0 6.4 Z" fill="%2376AF9B" transform="translate%28546 425%29 rotate%2837%29" stroke-linejoin="round" stroke="%2376AF9B" stroke-width="2"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23E8B22B" stroke-width="3.2" stroke-linecap="round" transform="translate%28461 90%29 rotate%28260%29"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23DD85CF" stroke-width="3.2" stroke-linecap="round" transform="translate%2822 197%29 rotate%28162%29"/%3E%3Cpath d="M0 -10.039584317740061 L9.0 7.0 L-8.5 6.0 Z" fill="%23625BD1" transform="translate%28231 159%29 rotate%28241%29" stroke-linejoin="round" stroke="%23625BD1" stroke-width="2"/%3E%3Cpath d="M0 -8.561400086085627 L7.7 6.0 L-7.3 5.1 Z" fill="%23625BD1" transform="translate%28293 119%29 rotate%28214%29" stroke-linejoin="round" stroke="%23625BD1" stroke-width="2"/%3E%3Ccircle cx="261" cy="330" r="2.3" fill="%23E8B22B"/%3E%3Ccircle cx="249" cy="320" r="3.6" fill="%23E8B22B"/%3E%3Ccircle cx="254" cy="323" r="3.9" fill="%23E8B22B"/%3E%3Cpath d="M0 -11.241046720166711 L10.1 7.9 L-9.6 6.7 Z" fill="%2376AF9B" transform="translate%28141 179%29 rotate%28220%29" stroke-linejoin="round" stroke="%2376AF9B" stroke-width="2"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%23F19481" stroke-width="3.2" stroke-linecap="round" transform="translate%28443 290%29 rotate%28291%29"/%3E%3Ccircle cx="174" cy="405" r="2.8" fill="%23EB5E26"/%3E%3Ccircle cx="190" cy="393" r="3.8" fill="%23EB5E26"/%3E%3Ccircle cx="174" cy="399" r="3.1" fill="%23EB5E26"/%3E%3Ccircle cx="193" cy="394" r="3.5" fill="%23EB5E26"/%3E%3Cpath d="M0 -10.326022465240571 L9.3 7.2 L-8.8 6.2 Z" fill="%23E8B22B" transform="translate%28139 547%29 rotate%28171%29" stroke-linejoin="round" stroke="%23E8B22B" stroke-width="2"/%3E%3Cpath d="M-12 0 q6 -8 12 0 t12 0" fill="none" stroke="%2376AF9B" stroke-width="3.2" stroke-linecap="round" transform="translate%28149 64%29 rotate%28327%29"/%3E%3Ccircle cx="297" cy="150" r="4.0" fill="%23EB5E26"/%3E%3C/g%3E%3C/svg%3E"); }

/* ---------- K. little logo "stickers" on story + form cards ---------- */
.jx-sticker { position: absolute; z-index: 3; width: 58px; height: auto; top: -20px; right: -14px; rotate: 14deg; pointer-events: none;
  filter: drop-shadow(2px 3px 0 rgba(4,2,2,.25)); transition: rotate .4s cubic-bezier(.34,1.56,.64,1); }
.jx-sticker.jx-in { top: 12px; right: 12px; width: 44px; }
:hover > .jx-sticker { rotate: -8deg; }

/* ---------- L. back to top ---------- */
.jx-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 900; width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--pc, var(--coral)); color: var(--ink); border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink); opacity: 0; visibility: hidden; translate: 0 16px; scale: .8;
  transition: opacity .25s, visibility .25s, translate .35s cubic-bezier(.34,1.56,.64,1), scale .35s cubic-bezier(.34,1.56,.64,1);
}
html[data-theme="dark"] .jx-top { box-shadow: 3px 3px 0 #FFFDFB; }
body.pg-resources .jx-top, body.pg-shop .jx-top { color: #fff; }
.jx-top.show { opacity: 1; visibility: visible; translate: 0 0; scale: 1; }
.jx-top:hover { translate: 0 -3px; }
.jx-top svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- M. favorites + counts on filters ---------- */
.jx-count { display: inline-grid; place-items: center; min-width: 1.6em; height: 1.6em; padding: 0 .4em; margin-left: .45em; border-radius: 999px;
  font: 900 .7rem/1 var(--body); background: color-mix(in srgb, currentColor 14%, transparent); }
.jx-fav { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); color: var(--fg-soft);
  display: grid; place-items: center; cursor: pointer; margin-left: auto; margin-right: .6rem; transition: transform .2s, background .2s, color .2s; }
.jx-fav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jx-fav:hover { transform: scale(1.1) rotate(-8deg); color: var(--t-pink); }
.jx-fav[aria-pressed="true"] { background: var(--pink); color: var(--ink); border-color: var(--ink); }
.jx-fav[aria-pressed="true"] svg { fill: currentColor; }
.jx-fav.pop { animation: jx-heart .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes jx-heart { 40% { transform: scale(1.35) rotate(-10deg); } }
.jx-saved { display: inline-flex; align-items: center; gap: 7px; border: 2px solid var(--line); background: var(--card); color: var(--fg);
  border-radius: 999px; padding: 7px 14px; font: 800 .85rem/1 var(--body); cursor: pointer; transition: background .2s, transform .15s; }
.jx-saved svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.jx-saved[aria-pressed="true"] { background: var(--pink); color: var(--ink); border-color: var(--ink); }
.jx-saved[aria-pressed="true"] svg { fill: currentColor; }
.jx-hidden { display: none !important; }
.jx-empty { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; font: 700 1rem/1.5 var(--body); color: var(--fg-soft); }

/* ---------- N. mini bar that stays at the bottom of the screen while you scroll the results ---------- */
.jx-minibar {
  position: fixed; left: 50%; bottom: 20px; z-index: 95; translate: -50% 20px; opacity: 0; visibility: hidden;
  display: flex; align-items: center; gap: .7rem; max-width: calc(100vw - 160px); padding: 8px 8px 8px 16px;
  background: var(--card); color: var(--fg); border: 2px solid var(--line); border-radius: 999px; box-shadow: 4px 4px 0 var(--pc, var(--coral));
  font: 800 .88rem/1.2 var(--body); transition: opacity .2s, translate .3s cubic-bezier(.34,1.56,.64,1), visibility .2s;
}
.jx-minibar.show { opacity: 1; visibility: visible; translate: -50% 0; }
.jx-minibar .jx-mb-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jx-minibar .jx-mb-text b { color: var(--pc-t, var(--t-coral)); }
.jx-minibar button { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 2px solid var(--ink); background: var(--pc, var(--coral));
  color: var(--ink); border-radius: 999px; padding: 7px 14px; font: 900 .8rem/1 var(--body); cursor: pointer; }
body.pg-resources .jx-minibar button { color: #fff; }
.jx-minibar button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .jx-minibar { left: 12px; translate: 0 20px; max-width: calc(100vw - 90px); font-size: .8rem; } .jx-minibar.show { translate: 0 0; } }

/* ---------- O. Joy Wall: live counter + confetti after sharing ---------- */
.jx-counter { font-variant-numeric: tabular-nums; }
.jx-counter.near { color: var(--t-orange); font-weight: 900; }
.jx-confetti { position: fixed; z-index: 1500; pointer-events: none; left: 0; top: 0; will-change: transform, opacity; }

/* ---------- P. Contact: quick topics ---------- */
.jx-topics { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1rem; }
.jx-topic { border: 2px solid var(--line); background: var(--field, var(--card)); color: var(--fg); border-radius: 999px; padding: 8px 14px;
  font: 800 .85rem/1 var(--body); cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.jx-topic:hover { transform: translate(-1px, -2px); box-shadow: 3px 3px 0 var(--pc, var(--mustard)); }
.jx-topic[aria-pressed="true"] { background: var(--pc, var(--mustard)); color: var(--ink); border-color: var(--ink); }

@media (prefers-reduced-motion: reduce) { .jx-marquee-track { animation: none; } }

/* favorites note (2026-09-27): make clear hearts are kept on this device, no login */
.jx-saved-note { font: 700 .8rem/1.3 var(--body); color: var(--fg-faint); }
.jx-saved-wrap { margin-top: .9rem; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.results-meta { flex-wrap: wrap; gap: .6rem .9rem; }