/* GENERATED by tools/css/bundle.py from m3x.src.css -- do not edit. Edit the module under m3x/ and re-run the script. */ /* ---- m3x/fonts.css ---- */ /* Display = Bricolage Grotesque (wdth 100, wght 500-800), Body = Figtree. Latin only and self-hosted; Devanagari and Latin Extended fall through to Poppins (see --body). */ @font-face{font-family:Display;font-weight:500 800;font-display:swap;src:url("../fonts/m3x/display-latin.woff2") format("woff2")} @font-face{font-family:Body;font-weight:400 800;font-display:swap;src:url("../fonts/m3x/body-latin.woff2") format("woff2")} /* ---- m3x/shapes.css ---- */ /* GENERATED by scripts/gen_m3x_shapes.py. Do not edit by hand. */ :root{ --shape-circle:polygon(50.00% 0.00%,52.62% 0.07%,55.23% 0.27%,57.82% 0.62%,60.40% 1.09%,62.94% 1.70%,65.45% 2.45%,67.92% 3.32%,70.34% 4.32%,72.70% 5.45%,75.00% 6.70%,77.23% 8.07%,79.39% 9.55%,81.47% 11.14%,83.46% 12.84%,85.36% 14.64%,87.16% 16.54%,88.86% 18.53%,90.45% 20.61%,91.93% 22.77%,93.30% 25.00%,94.55% 27.30%,95.68% 29.66%,96.68% 32.08%,97.55% 34.55%,98.30% 37.06%,98.91% 39.60%,99.38% 42.18%,99.73% 44.77%,99.93% 47.38%,100.00% 50.00%,99.93% 52.62%,99.73% 55.23%,99.38% 57.82%,98.91% 60.40%,98.30% 62.94%,97.55% 65.45%,96.68% 67.92%,95.68% 70.34%,94.55% 72.70%,93.30% 75.00%,91.93% 77.23%,90.45% 79.39%,88.86% 81.47%,87.16% 83.46%,85.36% 85.36%,83.46% 87.16%,81.47% 88.86%,79.39% 90.45%,77.23% 91.93%,75.00% 93.30%,72.70% 94.55%,70.34% 95.68%,67.92% 96.68%,65.45% 97.55%,62.94% 98.30%,60.40% 98.91%,57.82% 99.38%,55.23% 99.73%,52.62% 99.93%,50.00% 100.00%,47.38% 99.93%,44.77% 99.73%,42.18% 99.38%,39.60% 98.91%,37.06% 98.30%,34.55% 97.55%,32.08% 96.68%,29.66% 95.68%,27.30% 94.55%,25.00% 93.30%,22.77% 91.93%,20.61% 90.45%,18.53% 88.86%,16.54% 87.16%,14.64% 85.36%,12.84% 83.46%,11.14% 81.47%,9.55% 79.39%,8.07% 77.23%,6.70% 75.00%,5.45% 72.70%,4.32% 70.34%,3.32% 67.92%,2.45% 65.45%,1.70% 62.94%,1.09% 60.40%,0.62% 57.82%,0.27% 55.23%,0.07% 52.62%,0.00% 50.00%,0.07% 47.38%,0.27% 44.77%,0.62% 42.18%,1.09% 39.60%,1.70% 37.06%,2.45% 34.55%,3.32% 32.08%,4.32% 29.66%,5.45% 27.30%,6.70% 25.00%,8.07% 22.77%,9.55% 20.61%,11.14% 18.53%,12.84% 16.54%,14.64% 14.64%,16.54% 12.84%,18.53% 11.14%,20.61% 9.55%,22.77% 8.07%,25.00% 6.70%,27.30% 5.45%,29.66% 4.32%,32.08% 3.32%,34.55% 2.45%,37.06% 1.70%,39.60% 1.09%,42.18% 0.62%,44.77% 0.27%,47.38% 0.07%); --shape-cookie:polygon(50.00% 3.05%,52.53% 1.73%,55.17% 0.85%,57.82% 0.65%,60.36% 1.24%,62.71% 2.57%,64.80% 4.45%,66.65% 6.62%,68.37% 8.75%,70.08% 10.59%,71.95% 11.98%,74.09% 12.91%,76.54% 13.47%,79.25% 13.89%,82.05% 14.41%,84.72% 15.28%,87.05% 16.64%,88.83% 18.56%,89.98% 20.95%,90.54% 23.68%,90.66% 26.53%,90.60% 29.31%,90.63% 31.91%,91.02% 34.26%,91.89% 36.39%,93.26% 38.41%,95.00% 40.43%,96.84% 42.58%,98.48% 44.91%,99.60% 47.40%,100.00% 50.00%,99.60% 52.60%,98.48% 55.09%,96.84% 57.42%,95.00% 59.57%,93.26% 61.59%,91.89% 63.61%,91.02% 65.74%,90.63% 68.09%,90.60% 70.69%,90.66% 73.47%,90.54% 76.32%,89.98% 79.05%,88.83% 81.44%,87.05% 83.36%,84.72% 84.72%,82.05% 85.59%,79.25% 86.11%,76.54% 86.53%,74.09% 87.09%,71.95% 88.02%,70.08% 89.41%,68.37% 91.25%,66.65% 93.38%,64.80% 95.55%,62.71% 97.43%,60.36% 98.76%,57.82% 99.35%,55.17% 99.15%,52.53% 98.27%,50.00% 96.95%,47.62% 95.50%,45.35% 94.24%,43.13% 93.39%,40.84% 93.08%,38.41% 93.26%,35.78% 93.75%,33.00% 94.28%,30.17% 94.53%,27.45% 94.25%,25.00% 93.30%,22.95% 91.65%,21.35% 89.43%,20.15% 86.86%,19.22% 84.19%,18.33% 81.67%,17.27% 79.47%,15.86% 77.65%,14.02% 76.14%,11.79% 74.82%,9.34% 73.47%,6.93% 71.94%,4.86% 70.10%,3.36% 67.90%,2.59% 65.40%,2.57% 62.71%,3.16% 59.96%,4.10% 57.27%,5.09% 54.72%,5.83% 52.31%,6.10% 50.00%,5.83% 47.69%,5.09% 45.28%,4.10% 42.73%,3.16% 40.04%,2.57% 37.29%,2.59% 34.60%,3.36% 32.10%,4.86% 29.90%,6.93% 28.06%,9.34% 26.53%,11.79% 25.18%,14.02% 23.86%,15.86% 22.35%,17.27% 20.53%,18.33% 18.33%,19.22% 15.81%,20.15% 13.14%,21.35% 10.57%,22.95% 8.35%,25.00% 6.70%,27.45% 5.75%,30.17% 5.47%,33.00% 5.72%,35.78% 6.25%,38.41% 6.74%,40.84% 6.92%,43.13% 6.61%,45.35% 5.76%,47.62% 4.50%); --shape-sunny:polygon(50.00% 0.00%,52.59% 0.50%,55.06% 1.90%,57.29% 4.00%,59.26% 6.45%,61.02% 8.88%,62.68% 10.97%,64.41% 12.47%,66.35% 13.28%,68.63% 13.44%,71.28% 13.14%,74.25% 12.66%,77.38% 12.32%,80.43% 12.42%,83.17% 13.16%,85.36% 14.64%,86.84% 16.83%,87.58% 19.57%,87.68% 22.62%,87.34% 25.75%,86.86% 28.72%,86.56% 31.37%,86.72% 33.65%,87.53% 35.59%,89.03% 37.32%,91.12% 38.98%,93.55% 40.74%,96.00% 42.71%,98.10% 44.94%,99.50% 47.41%,100.00% 50.00%,99.50% 52.59%,98.10% 55.06%,96.00% 57.29%,93.55% 59.26%,91.12% 61.02%,89.03% 62.68%,87.53% 64.41%,86.72% 66.35%,86.56% 68.63%,86.86% 71.28%,87.34% 74.25%,87.68% 77.38%,87.58% 80.43%,86.84% 83.17%,85.36% 85.36%,83.17% 86.84%,80.43% 87.58%,77.38% 87.68%,74.25% 87.34%,71.28% 86.86%,68.63% 86.56%,66.35% 86.72%,64.41% 87.53%,62.68% 89.03%,61.02% 91.12%,59.26% 93.55%,57.29% 96.00%,55.06% 98.10%,52.59% 99.50%,50.00% 100.00%,47.41% 99.50%,44.94% 98.10%,42.71% 96.00%,40.74% 93.55%,38.98% 91.12%,37.32% 89.03%,35.59% 87.53%,33.65% 86.72%,31.37% 86.56%,28.72% 86.86%,25.75% 87.34%,22.62% 87.68%,19.57% 87.58%,16.83% 86.84%,14.64% 85.36%,13.16% 83.17%,12.42% 80.43%,12.32% 77.38%,12.66% 74.25%,13.14% 71.28%,13.44% 68.63%,13.28% 66.35%,12.47% 64.41%,10.97% 62.68%,8.88% 61.02%,6.45% 59.26%,4.00% 57.29%,1.90% 55.06%,0.50% 52.59%,0.00% 50.00%,0.50% 47.41%,1.90% 44.94%,4.00% 42.71%,6.45% 40.74%,8.88% 38.98%,10.97% 37.32%,12.47% 35.59%,13.28% 33.65%,13.44% 31.37%,13.14% 28.72%,12.66% 25.75%,12.32% 22.62%,12.42% 19.57%,13.16% 16.83%,14.64% 14.64%,16.83% 13.16%,19.57% 12.42%,22.62% 12.32%,25.75% 12.66%,28.72% 13.14%,31.37% 13.44%,33.65% 13.28%,35.59% 12.47%,37.32% 10.97%,38.98% 8.88%,40.74% 6.45%,42.71% 4.00%,44.94% 1.90%,47.41% 0.50%); --shape-flower:polygon(50.00% 7.26%,52.33% 5.45%,54.85% 3.89%,57.49% 2.72%,60.19% 2.04%,62.88% 1.94%,65.45% 2.45%,67.83% 3.55%,69.94% 5.21%,71.73% 7.35%,73.18% 9.84%,74.30% 12.58%,75.12% 15.43%,75.71% 18.25%,76.16% 20.94%,76.59% 23.41%,77.08% 25.61%,77.76% 27.52%,78.70% 29.15%,79.96% 30.55%,81.56% 31.78%,83.50% 32.93%,85.72% 34.10%,88.14% 35.36%,90.64% 36.79%,93.10% 38.45%,95.35% 40.36%,97.28% 42.51%,98.76% 44.88%,99.68% 47.40%,100.00% 50.00%,99.68% 52.60%,98.76% 55.12%,97.28% 57.49%,95.35% 59.64%,93.10% 61.55%,90.64% 63.21%,88.14% 64.64%,85.72% 65.90%,83.50% 67.07%,81.56% 68.22%,79.96% 69.45%,78.70% 70.85%,77.76% 72.48%,77.08% 74.39%,76.59% 76.59%,76.16% 79.06%,75.71% 81.75%,75.12% 84.57%,74.30% 87.42%,73.18% 90.16%,71.73% 92.65%,69.94% 94.79%,67.83% 96.45%,65.45% 97.55%,62.88% 98.06%,60.19% 97.96%,57.49% 97.28%,54.85% 96.11%,52.33% 94.55%,50.00% 92.74%,47.86% 90.80%,45.91% 88.89%,44.12% 87.14%,42.42% 85.65%,40.76% 84.50%,39.04% 83.73%,37.20% 83.35%,35.18% 83.29%,32.93% 83.50%,30.45% 83.86%,27.75% 84.26%,24.88% 84.57%,21.92% 84.67%,18.97% 84.46%,16.15% 83.85%,13.57% 82.81%,11.34% 81.31%,9.55% 79.39%,8.27% 77.10%,7.54% 74.51%,7.35% 71.73%,7.64% 68.86%,8.35% 65.99%,9.36% 63.21%,10.54% 60.57%,11.75% 58.13%,12.86% 55.88%,13.76% 53.81%,14.33% 51.87%,14.53% 50.00%,14.33% 48.13%,13.76% 46.19%,12.86% 44.12%,11.75% 41.87%,10.54% 39.43%,9.36% 36.79%,8.35% 34.01%,7.64% 31.14%,7.35% 28.27%,7.54% 25.49%,8.27% 22.90%,9.55% 20.61%,11.34% 18.69%,13.57% 17.19%,16.15% 16.15%,18.97% 15.54%,21.92% 15.33%,24.88% 15.43%,27.75% 15.74%,30.45% 16.14%,32.93% 16.50%,35.18% 16.71%,37.20% 16.65%,39.04% 16.27%,40.76% 15.50%,42.42% 14.35%,44.12% 12.86%,45.91% 11.11%,47.86% 9.20%); --shape-clover:polygon(50.00% 0.00%,52.61% 0.25%,55.15% 0.99%,57.57% 2.19%,59.82% 3.79%,61.86% 5.73%,63.67% 7.92%,65.24% 10.29%,66.59% 12.73%,67.75% 15.17%,68.75% 17.52%,69.66% 19.73%,70.53% 21.75%,71.43% 23.54%,72.43% 25.09%,73.57% 26.43%,74.91% 27.57%,76.46% 28.57%,78.25% 29.47%,80.27% 30.34%,82.48% 31.25%,84.83% 32.25%,87.27% 33.41%,89.71% 34.76%,92.08% 36.33%,94.27% 38.14%,96.21% 40.18%,97.81% 42.43%,99.01% 44.85%,99.75% 47.39%,100.00% 50.00%,99.75% 52.61%,99.01% 55.15%,97.81% 57.57%,96.21% 59.82%,94.27% 61.86%,92.08% 63.67%,89.71% 65.24%,87.27% 66.59%,84.83% 67.75%,82.48% 68.75%,80.27% 69.66%,78.25% 70.53%,76.46% 71.43%,74.91% 72.43%,73.57% 73.57%,72.43% 74.91%,71.43% 76.46%,70.53% 78.25%,69.66% 80.27%,68.75% 82.48%,67.75% 84.83%,66.59% 87.27%,65.24% 89.71%,63.67% 92.08%,61.86% 94.27%,59.82% 96.21%,57.57% 97.81%,55.15% 99.01%,52.61% 99.75%,50.00% 100.00%,47.39% 99.75%,44.85% 99.01%,42.43% 97.81%,40.18% 96.21%,38.14% 94.27%,36.33% 92.08%,34.76% 89.71%,33.41% 87.27%,32.25% 84.83%,31.25% 82.48%,30.34% 80.27%,29.47% 78.25%,28.57% 76.46%,27.57% 74.91%,26.43% 73.57%,25.09% 72.43%,23.54% 71.43%,21.75% 70.53%,19.73% 69.66%,17.52% 68.75%,15.17% 67.75%,12.73% 66.59%,10.29% 65.24%,7.92% 63.67%,5.73% 61.86%,3.79% 59.82%,2.19% 57.57%,0.99% 55.15%,0.25% 52.61%,0.00% 50.00%,0.25% 47.39%,0.99% 44.85%,2.19% 42.43%,3.79% 40.18%,5.73% 38.14%,7.92% 36.33%,10.29% 34.76%,12.73% 33.41%,15.17% 32.25%,17.52% 31.25%,19.73% 30.34%,21.75% 29.47%,23.54% 28.57%,25.09% 27.57%,26.43% 26.43%,27.57% 25.09%,28.57% 23.54%,29.47% 21.75%,30.34% 19.73%,31.25% 17.52%,32.25% 15.17%,33.41% 12.73%,34.76% 10.29%,36.33% 7.92%,38.14% 5.73%,40.18% 3.79%,42.43% 2.19%,44.85% 0.99%,47.39% 0.25%); --shape-burst:polygon(50.00% 0.00%,52.56% 1.09%,54.84% 3.96%,56.72% 7.54%,58.38% 10.57%,60.17% 12.05%,62.46% 11.66%,65.41% 9.87%,68.83% 7.70%,72.24% 6.36%,75.00% 6.70%,76.67% 8.92%,77.21% 12.54%,77.05% 16.59%,76.97% 20.04%,77.78% 22.22%,79.96% 23.03%,83.41% 22.95%,87.46% 22.79%,91.08% 23.33%,93.30% 25.00%,93.64% 27.76%,92.30% 31.17%,90.13% 34.59%,88.34% 37.54%,87.95% 39.83%,89.43% 41.62%,92.46% 43.28%,96.04% 45.16%,98.91% 47.44%,100.00% 50.00%,98.91% 52.56%,96.04% 54.84%,92.46% 56.72%,89.43% 58.38%,87.95% 60.17%,88.34% 62.46%,90.13% 65.41%,92.30% 68.83%,93.64% 72.24%,93.30% 75.00%,91.08% 76.67%,87.46% 77.21%,83.41% 77.05%,79.96% 76.97%,77.78% 77.78%,76.97% 79.96%,77.05% 83.41%,77.21% 87.46%,76.67% 91.08%,75.00% 93.30%,72.24% 93.64%,68.83% 92.30%,65.41% 90.13%,62.46% 88.34%,60.17% 87.95%,58.38% 89.43%,56.72% 92.46%,54.84% 96.04%,52.56% 98.91%,50.00% 100.00%,47.44% 98.91%,45.16% 96.04%,43.28% 92.46%,41.62% 89.43%,39.83% 87.95%,37.54% 88.34%,34.59% 90.13%,31.17% 92.30%,27.76% 93.64%,25.00% 93.30%,23.33% 91.08%,22.79% 87.46%,22.95% 83.41%,23.03% 79.96%,22.22% 77.78%,20.04% 76.97%,16.59% 77.05%,12.54% 77.21%,8.92% 76.67%,6.70% 75.00%,6.36% 72.24%,7.70% 68.83%,9.87% 65.41%,11.66% 62.46%,12.05% 60.17%,10.57% 58.38%,7.54% 56.72%,3.96% 54.84%,1.09% 52.56%,0.00% 50.00%,1.09% 47.44%,3.96% 45.16%,7.54% 43.28%,10.57% 41.62%,12.05% 39.83%,11.66% 37.54%,9.87% 34.59%,7.70% 31.17%,6.36% 27.76%,6.70% 25.00%,8.92% 23.33%,12.54% 22.79%,16.59% 22.95%,20.04% 23.03%,22.22% 22.22%,23.03% 20.04%,22.95% 16.59%,22.79% 12.54%,23.33% 8.92%,25.00% 6.70%,27.76% 6.36%,31.17% 7.70%,34.59% 9.87%,37.54% 11.66%,39.83% 12.05%,41.62% 10.57%,43.28% 7.54%,45.16% 3.96%,47.44% 1.09%); --shape-squircle:polygon(50.00% 7.96%,52.20% 7.96%,54.42% 7.96%,56.66% 7.96%,58.93% 7.98%,61.25% 8.01%,63.62% 8.07%,66.05% 8.18%,68.54% 8.36%,71.08% 8.64%,73.64% 9.05%,76.21% 9.64%,78.73% 10.46%,81.13% 11.55%,83.37% 12.94%,85.36% 14.64%,87.06% 16.63%,88.45% 18.87%,89.54% 21.27%,90.36% 23.79%,90.95% 26.36%,91.36% 28.92%,91.64% 31.46%,91.82% 33.95%,91.93% 36.38%,91.99% 38.75%,92.02% 41.07%,92.04% 43.34%,92.04% 45.58%,92.04% 47.80%,92.04% 50.00%,92.04% 52.20%,92.04% 54.42%,92.04% 56.66%,92.02% 58.93%,91.99% 61.25%,91.93% 63.62%,91.82% 66.05%,91.64% 68.54%,91.36% 71.08%,90.95% 73.64%,90.36% 76.21%,89.54% 78.73%,88.45% 81.13%,87.06% 83.37%,85.36% 85.36%,83.37% 87.06%,81.13% 88.45%,78.73% 89.54%,76.21% 90.36%,73.64% 90.95%,71.08% 91.36%,68.54% 91.64%,66.05% 91.82%,63.62% 91.93%,61.25% 91.99%,58.93% 92.02%,56.66% 92.04%,54.42% 92.04%,52.20% 92.04%,50.00% 92.04%,47.80% 92.04%,45.58% 92.04%,43.34% 92.04%,41.07% 92.02%,38.75% 91.99%,36.38% 91.93%,33.95% 91.82%,31.46% 91.64%,28.92% 91.36%,26.36% 90.95%,23.79% 90.36%,21.27% 89.54%,18.87% 88.45%,16.63% 87.06%,14.64% 85.36%,12.94% 83.37%,11.55% 81.13%,10.46% 78.73%,9.64% 76.21%,9.05% 73.64%,8.64% 71.08%,8.36% 68.54%,8.18% 66.05%,8.07% 63.62%,8.01% 61.25%,7.98% 58.93%,7.96% 56.66%,7.96% 54.42%,7.96% 52.20%,7.96% 50.00%,7.96% 47.80%,7.96% 45.58%,7.96% 43.34%,7.98% 41.07%,8.01% 38.75%,8.07% 36.38%,8.18% 33.95%,8.36% 31.46%,8.64% 28.92%,9.05% 26.36%,9.64% 23.79%,10.46% 21.27%,11.55% 18.87%,12.94% 16.63%,14.64% 14.64%,16.63% 12.94%,18.87% 11.55%,21.27% 10.46%,23.79% 9.64%,26.36% 9.05%,28.92% 8.64%,31.46% 8.36%,33.95% 8.18%,36.38% 8.07%,38.75% 8.01%,41.07% 7.98%,43.34% 7.96%,45.58% 7.96%,47.80% 7.96%); --shape-gem:polygon(50.00% 0.00%,52.60% 0.33%,55.15% 0.96%,57.64% 1.77%,60.05% 2.72%,62.38% 3.79%,64.64% 4.94%,66.82% 6.18%,68.93% 7.48%,70.98% 8.83%,72.95% 10.25%,74.87% 11.71%,76.72% 13.22%,78.52% 14.78%,80.27% 16.38%,81.97% 18.03%,83.62% 19.73%,85.22% 21.48%,86.78% 23.28%,88.29% 25.13%,89.75% 27.05%,91.17% 29.02%,92.52% 31.07%,93.82% 33.18%,95.06% 35.36%,96.21% 37.62%,97.28% 39.95%,98.23% 42.36%,99.04% 44.85%,99.67% 47.40%,100.00% 50.00%,99.67% 52.60%,99.04% 55.15%,98.23% 57.64%,97.28% 60.05%,96.21% 62.38%,95.06% 64.64%,93.82% 66.82%,92.52% 68.93%,91.17% 70.98%,89.75% 72.95%,88.29% 74.87%,86.78% 76.72%,85.22% 78.52%,83.62% 80.27%,81.97% 81.97%,80.27% 83.62%,78.52% 85.22%,76.72% 86.78%,74.87% 88.29%,72.95% 89.75%,70.98% 91.17%,68.93% 92.52%,66.82% 93.82%,64.64% 95.06%,62.38% 96.21%,60.05% 97.28%,57.64% 98.23%,55.15% 99.04%,52.60% 99.67%,50.00% 100.00%,47.40% 99.67%,44.85% 99.04%,42.36% 98.23%,39.95% 97.28%,37.62% 96.21%,35.36% 95.06%,33.18% 93.82%,31.07% 92.52%,29.02% 91.17%,27.05% 89.75%,25.13% 88.29%,23.28% 86.78%,21.48% 85.22%,19.73% 83.62%,18.03% 81.97%,16.38% 80.27%,14.78% 78.52%,13.22% 76.72%,11.71% 74.87%,10.25% 72.95%,8.83% 70.98%,7.48% 68.93%,6.18% 66.82%,4.94% 64.64%,3.79% 62.38%,2.72% 60.05%,1.77% 57.64%,0.96% 55.15%,0.33% 52.60%,0.00% 50.00%,0.33% 47.40%,0.96% 44.85%,1.77% 42.36%,2.72% 39.95%,3.79% 37.62%,4.94% 35.36%,6.18% 33.18%,7.48% 31.07%,8.83% 29.02%,10.25% 27.05%,11.71% 25.13%,13.22% 23.28%,14.78% 21.48%,16.38% 19.73%,18.03% 18.03%,19.73% 16.38%,21.48% 14.78%,23.28% 13.22%,25.13% 11.71%,27.05% 10.25%,29.02% 8.83%,31.07% 7.48%,33.18% 6.18%,35.36% 4.94%,37.62% 3.79%,39.95% 2.72%,42.36% 1.77%,44.85% 0.96%,47.40% 0.33%); --shape-pebble:polygon(50.00% 10.28%,52.05% 10.88%,54.04% 11.52%,55.99% 12.18%,57.90% 12.84%,59.78% 13.52%,61.64% 14.19%,63.49% 14.86%,65.35% 15.53%,67.21% 16.21%,69.10% 16.91%,71.02% 17.64%,72.96% 18.40%,74.92% 19.22%,76.92% 20.11%,78.92% 21.08%,80.94% 22.15%,82.94% 23.32%,84.93% 24.62%,86.87% 26.05%,88.76% 27.62%,90.56% 29.33%,92.27% 31.18%,93.85% 33.17%,95.28% 35.29%,96.55% 37.53%,97.64% 39.87%,98.53% 42.31%,99.22% 44.83%,99.68% 47.40%,99.92% 50.00%,99.93% 52.62%,99.72% 55.23%,99.28% 57.81%,98.64% 60.34%,97.79% 62.80%,96.75% 65.19%,95.53% 67.48%,94.16% 69.66%,92.65% 71.73%,91.01% 73.68%,89.27% 75.50%,87.45% 77.21%,85.55% 78.79%,83.59% 80.25%,81.59% 81.59%,79.56% 82.83%,77.51% 83.97%,75.44% 85.01%,73.35% 85.96%,71.27% 86.83%,69.17% 87.63%,67.07% 88.34%,64.97% 88.99%,62.86% 89.57%,60.74% 90.07%,58.61% 90.51%,56.47% 90.86%,54.32% 91.14%,52.17% 91.34%,50.00% 91.44%,47.83% 91.45%,45.65% 91.36%,43.48% 91.17%,41.31% 90.86%,39.16% 90.44%,37.03% 89.91%,34.93% 89.26%,32.86% 88.49%,30.84% 87.61%,28.86% 86.62%,26.94% 85.51%,25.08% 84.30%,23.28% 82.99%,21.56% 81.59%,19.90% 80.10%,18.32% 78.52%,16.81% 76.87%,15.38% 75.15%,14.02% 73.37%,12.73% 71.52%,11.52% 69.61%,10.38% 67.64%,9.31% 65.62%,8.32% 63.54%,7.41% 61.41%,6.57% 59.23%,5.83% 57.00%,5.17% 54.71%,4.61% 52.38%,4.16% 50.00%,3.82% 47.58%,3.61% 45.12%,3.53% 42.64%,3.60% 40.14%,3.82% 37.63%,4.20% 35.12%,4.76% 32.63%,5.49% 30.18%,6.40% 27.79%,7.49% 25.46%,8.77% 23.22%,10.21% 21.09%,11.82% 19.08%,13.59% 17.22%,15.51% 15.51%,17.56% 13.97%,19.72% 12.60%,21.97% 11.42%,24.31% 10.44%,26.70% 9.64%,29.12% 9.03%,31.57% 8.60%,34.01% 8.35%,36.44% 8.26%,38.83% 8.32%,41.18% 8.51%,43.48% 8.82%,45.72% 9.23%,47.89% 9.73%); --spring-fast:cubic-bezier(.3,1.3,.5,1);--spring:cubic-bezier(.3,1.5,.5,1);--spring-soft:cubic-bezier(.25,1.2,.4,1); } @supports (transition-timing-function:linear(0,1)){:root{ --spring-fast:linear(0,0.101,0.319,0.561,0.771,0.926,1.023,1.071,1.084,1.075,1.057,1.037,1.019,1.006,0.998,0.994,0.993,0.994,0.995,0.997,0.998,0.999,1,1,1.001,1.001,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1); --spring:linear(0,0.044,0.155,0.307,0.476,0.643,0.795,0.923,1.023,1.095,1.139,1.16,1.162,1.15,1.129,1.102,1.075,1.048,1.025,1.006,0.991,0.981,0.976,0.973,0.974,0.977,0.981,0.985,0.99,0.994,0.997,1,1.002,1.003,1.004,1.004,1.004,1.004,1.003,1.002,1.001,1.001,1,1,1,0.999,0.999,0.999,1); --spring-soft:linear(0,0.023,0.084,0.168,0.266,0.369,0.471,0.568,0.657,0.736,0.805,0.863,0.911,0.949,0.979,1.001,1.017,1.028,1.035,1.038,1.038,1.037,1.034,1.031,1.027,1.023,1.019,1.016,1.012,1.009,1.007,1.005,1.003,1.002,1.001,1,0.999,0.999,0.999,0.999,0.999,0.999,0.999,0.999,0.999,0.999,0.999,0.999,1); }} /* ---- m3x/tokens.css ---- */ /* m3x tokens: the one colour, type and motion scheme for the landing page AND the app. Brand colour comes from the NEBians N: front face #0058df, dark faces #052566 / #07337f, light facet #a8c5ff. Everything below is a tonal ramp of that blue, so a surface is never a "grey" and an accent is never a stranger to the logo. This file loads AFTER material3.css, so the --md-* roles here replace the generated palette on the web only. (00-palette.css stays as it is: the Android app shares it.) The short aliases (--pri, --surface ...) are what landing.css is written against; they point at the same roles, so the two surfaces can not drift apart. */ :root { color-scheme: light; /* ---- roles: light ---- */ --md-primary: #0058df; --md-on-primary: #ffffff; --md-primary-container: #dbe4ff; --md-on-primary-container: #001a52; --md-secondary: #485a80; --md-on-secondary: #ffffff; --md-secondary-container: #dfe7fa; --md-on-secondary-container: #0f1c3b; --md-tertiary: #006782; --md-on-tertiary: #ffffff; --md-tertiary-container: #c6ecff; --md-on-tertiary-container: #001f2a; --md-background: #f6f8ff; --md-on-background: #0b1530; --md-surface: #f6f8ff; --md-on-surface: #0b1530; --md-surface-variant: #e1e8f8; --md-on-surface-variant: #414b66; --md-on-surface-tertiary: #4f5976; --md-outline: #707a96; --md-outline-variant: #c6d0ea; --md-surface-dim: #d5dcee; --md-surface-bright: #fbfcff; --md-surface-container-lowest: #ffffff; --md-surface-container-low: #f0f4fe; --md-surface-container: #e9eefb; --md-surface-container-high: #e2e8f7; --md-surface-container-highest: #dae1f3; --md-elevated-surface: #ffffff; /* floating surfaces (menus, dialogs, sheets, popovers): white in light, a raised tone in dark */ --x-float: #ffffff; --x-float-line: #d3dbef; --md-inverse-surface: #1f2840; --md-inverse-on-surface: #edf1fc; --md-inverse-primary: #b2c5ff; --md-surface-tint: #0058df; --md-primary-fixed: #dbe4ff; --md-primary-fixed-dim: #b2c5ff; --md-on-primary-fixed: #001a52; --md-on-primary-fixed-variant: #003fa6; --md-tertiary-fixed: #c6ecff; --md-tertiary-fixed-dim: #7fd2f2; --md-on-tertiary-fixed: #001f2a; --md-on-tertiary-fixed-variant: #004d63; /* ---- tonal accents: the logo's blue family, used for tiles, tags and art ---- X = vivid fill (dark text on it), X-c = soft container, X-d = deep fill (white text on it) */ --azure: #7aa2ff; --azure-c: #d7e3ff; --azure-d: #0047b8; --sky: #5cc8ff; --sky-c: #cdeeff; --sky-d: #00598a; --aqua: #55d9c6; --aqua-c: #c6f3eb; --aqua-d: #0a6a62; --peri: #a9b9ff; --peri-c: #e3e9ff; --peri-d: #2a47a3; --ink: #06235f; --on-ink: #e6eeff; /* ---- type ---- */ --display: Display, "Arial Black", Poppins, system-ui, sans-serif; --body: Body, ui-sans-serif, Poppins, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --md-font: var(--body); --md-font-display: var(--display); /* ---- shape ---- */ --md-shape-xs: 8px; --md-shape-sm: 12px; --md-shape-md: 16px; --md-shape-lg: 24px; --md-shape-xl: 32px; --md-shape-xxl: 44px; /* a pill is a FINITE radius: 28px is a perfect pill up to 56px tall. 9999px made a hover morph (spring overshoot) pass through 0px, which flashed square corners. */ --md-shape-full: 28px; --md-radius-full: 28px; /* ---- motion ---- */ --ease-io: cubic-bezier(.65, 0, .35, 1); --md-motion-spatial-fast: .35s var(--spring-fast); --md-motion-spatial: .55s var(--spring); --md-motion-spatial-slow: .8s var(--spring-soft); /* ---- no elevation: separation comes from tone, border and shape ---- */ --md-elevation-1: none; --md-elevation-2: none; --md-elevation-3: none; --md-shadow: transparent; --md-shadow-lg: transparent; /* ---- landing aliases (landing.css is written against these) ---- */ --surface: var(--md-surface); --sf-low: var(--md-surface-container-low); --sf: var(--md-surface-container); --sf-high: var(--md-surface-container-high); --sf-highest: var(--md-surface-container-highest); --on: var(--md-on-surface); --on-var: var(--md-on-surface-variant); --outline-var: var(--md-outline-variant); --on-c: #07163a; --pri: var(--md-primary); --on-pri: var(--md-on-primary); --pri-c: var(--md-primary-container); --on-pri-c: var(--md-on-primary-container); } [data-theme="dark"] { --md-primary: #b2c5ff; --md-on-primary: #002a78; --md-primary-container: #003fa6; --md-on-primary-container: #dbe4ff; --md-secondary: #b4c3e6; --md-on-secondary: #1a2a4d; --md-secondary-container: #2a3858; --md-on-secondary-container: #dfe7fa; --md-tertiary: #7fd2f2; --md-on-tertiary: #003546; --md-tertiary-container: #004d63; --md-on-tertiary-container: #c6ecff; --md-background: #090f1f; --md-on-background: #e3e8f7; --md-surface: #090f1f; --md-on-surface: #e3e8f7; --md-surface-variant: #252f48; --md-on-surface-variant: #aab4ce; --md-on-surface-tertiary: #8590ac; --md-outline: #79839f; --md-outline-variant: #2f3a55; --md-surface-dim: #060b17; --md-surface-bright: #2a3550; --md-surface-container-lowest: #060b17; --md-surface-container-low: #0e1528; --md-surface-container: #121a2f; --md-surface-container-high: #1a243c; --md-surface-container-highest: #232e48; --md-elevated-surface: #1a243c; --x-float: #172036; --x-float-line: #2f3a55; --md-inverse-surface: #e3e8f7; --md-inverse-on-surface: #1f2840; --md-inverse-primary: #0058df; --md-surface-tint: #b2c5ff; --azure-c: #1c3470; --azure-d: #9db8ff; --sky-c: #0b3a52; --sky-d: #8fdcff; --aqua-c: #0b3b37; --aqua-d: #8ae9da; --peri-c: #25306a; --peri-d: #c1ccff; --on-c: #e3e8f7; --ink: #16397f; --on-ink: #e6eeff; color-scheme: dark; } /* a festive theme recolours the accent; tonal containers stay */ html[data-site-theme]:not([data-site-theme="everyday"]) { --pri: var(--st-accent, var(--md-primary)); --sky: var(--st-warm, #5cc8ff); } /* ---- m3x/core.css ---- */ /* m3x core: the pieces BOTH the landing page and the app use. If you are about to write the same rule in landing.css and in the app overlay, it belongs here instead. - shapes: nine polygons with one point count (shapes.css, generated) so any shape morphs into any other with a plain transition. .shp-cookie .shp-sunny .shp-flower .shp-clover .shp-burst .shp-gem .shp-circle .shp-squircle .shp-pebble; each sets --shape and --alt. - fills: .g-azure .g-sky .g-aqua .g-peri (vivid, dark text) and the -d forms (deep, white text) - brand: the N tile + wordmark (templates/components/_brand.html) - pill nav: .m3-pill with a sliding .m3-ind (static/web/js/m3x.js drives it) - buttons: .m3-btn on the landing, .md-btn* in the app, one visual spec - reveal: [data-reveal] springs in once when it scrolls into view */ /* ---------- shapes ---------- */ [class*="shp-"] { clip-path: var(--shape, var(--shape-circle)); transition: clip-path .8s var(--spring); } .shp-circle { --shape: var(--shape-circle); --alt: var(--shape-cookie); } .shp-cookie { --shape: var(--shape-cookie); --alt: var(--shape-flower); } .shp-sunny { --shape: var(--shape-sunny); --alt: var(--shape-burst); } .shp-flower { --shape: var(--shape-flower); --alt: var(--shape-clover); } .shp-clover { --shape: var(--shape-clover); --alt: var(--shape-cookie); } .shp-burst { --shape: var(--shape-burst); --alt: var(--shape-sunny); } .shp-gem { --shape: var(--shape-gem); --alt: var(--shape-pebble); } .shp-squircle { --shape: var(--shape-squircle); --alt: var(--shape-circle); } .shp-pebble { --shape: var(--shape-pebble); --alt: var(--shape-gem); } @keyframes morph { 0%, 100% { clip-path: var(--shape); } 50% { clip-path: var(--alt); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes rise { from { opacity: 0; transform: translateY(40px) scale(.95); } } @keyframes pop { from { opacity: 0; transform: scale(0) rotate(-80deg); } } @keyframes fade-up { from { opacity: 0; transform: translateY(14px); } } @keyframes m3-enter { from { opacity: 0; transform: translateY(18px) scale(.985); } } /* ---------- fills ---------- */ .g-azure { background: var(--azure); color: var(--on-c); } .g-sky { background: var(--sky); color: var(--on-c); } .g-aqua { background: var(--aqua); color: var(--on-c); } .g-peri { background: var(--peri); color: var(--on-c); } .g-azure-d { background: var(--azure-d); color: #fff; } .g-sky-d { background: var(--sky-d); color: #fff; } .g-aqua-d { background: var(--aqua-d); color: #fff; } .g-peri-d { background: var(--peri-d); color: #fff; } /* ---------- brand ---------- */ .brand { display: flex; align-items: center; gap: 12px; flex: none; color: var(--on); text-decoration: none; } .brand-tile { --mark-gap: var(--md-primary); display: grid; place-items: center; width: 44px; height: 44px; flex: none; background: var(--md-primary); color: var(--md-on-primary); --shape: var(--shape-cookie); clip-path: var(--shape); transition: clip-path .8s var(--spring), transform .6s var(--spring); } .brand-mark { width: 17px; height: 25px; stroke-width: 8; } .brand-name { font: 800 24px/1 var(--display); letter-spacing: -.04em; } .brand:hover .brand-tile { --shape: var(--shape-flower); transform: rotate(-8deg); } .brand:active .brand-tile { transform: scale(.9); } [data-theme="dark"] .brand-tile { --mark-gap: var(--md-primary); } /* ---------- pill nav ---------- One indicator slides between links. It follows the pointer and keyboard focus, and comes back to the current link when they leave. The link under the indicator takes the "on" colour (.is-target), not :hover, so text and pill always agree. */ .m3-pill { --h: 44px; position: relative; display: flex; gap: 2px; } .m3-pill > a { position: relative; z-index: 1; display: flex; align-items: center; height: var(--h); padding: 0 18px; border-radius: calc(var(--h) / 2); font: 700 16px/1 var(--body); color: var(--on-var); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: color .25s, transform .4s var(--spring); } .m3-pill > a.is-target { color: var(--on-pri-c); } .m3-pill > a:active { transform: scale(.95); } .m3-pill > a:focus-visible { outline: 3px solid var(--on); outline-offset: -3px; } .m3-ind { position: absolute; left: 0; top: 0; z-index: 0; height: var(--h); width: var(--w, 0); border-radius: calc(var(--h) / 2); background: var(--pri-c); transform: translateX(var(--x, 0)); opacity: 0; pointer-events: none; transition: opacity .25s; } .m3-ind.on { opacity: 1; } .m3-ind.anim { transition: transform .6s var(--spring-soft), width .6s var(--spring-soft), opacity .25s; } /* ---------- buttons ---------- A pill that squares up on hover and squishes on press. The state layer is a ::before in currentColor so it works on every fill. Landing: .m3-btn. App: .md-btn and its variants. */ .m3-btn, .md-btn { position: relative; isolation: isolate; overflow: hidden; -webkit-tap-highlight-color: transparent; transition: border-radius .6s var(--spring), transform .5s var(--spring), background-color .2s, color .2s, border-color .2s; } .m3-btn::before, .md-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0; transition: opacity .2s; pointer-events: none; } .m3-btn { --bg: var(--pri); --fg: var(--on-pri); --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: var(--h); padding: 0 26px; border: 0; border-radius: calc(var(--h) / 2); background: var(--bg); color: var(--fg); font: 700 17px/1 var(--body); cursor: pointer; white-space: nowrap; text-decoration: none; } .m3-btn .arrow { width: 22px; height: 22px; transition: transform .6s var(--spring); } .m3-btn-sm { --h: 44px; padding: 0 20px; font-size: 16px; } .m3-btn-lg { --h: 60px; padding: 0 32px; font-size: 18px; } .m3-btn-sky { --bg: var(--sky-c); --fg: var(--on-c); } .m3-btn-ink { --bg: var(--ink); --fg: var(--on-ink); } .m3-btn-light { --bg: var(--md-surface-container-lowest); --fg: var(--pri); } .m3-btn-text { --bg: transparent; --fg: var(--pri); } .md-btn { cursor: pointer; } .md-btn-small { border-radius: var(--md-shape-full); } @media (hover: hover) { .m3-btn:hover, .md-btn:hover { } .md-btn-small:hover { } .m3-btn:hover::before, .md-btn:hover::before { opacity: .08; } .m3-btn:hover .arrow { transform: translateX(5px); } } .m3-btn:active, .md-btn:active { transform: scale(.95); transition-duration: .12s; } .m3-btn:active::before, .md-btn:active::before { opacity: .14; } .md-btn:disabled, .md-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; } /* icon buttons: round, square up on hover */ .md-btn-icon, .md-icon-btn { width: 42px; height: 42px; transition: border-radius .5s var(--spring), transform .4s var(--spring), background-color .2s, color .2s; } @media (hover: hover) { .md-btn-icon:hover, .md-icon-btn:hover { background: var(--md-surface-container-high); } } .md-btn-icon:active, .md-icon-btn:active { transform: scale(.9); } /* ---------- theme toggle: one button for the landing page and the app (components/_theme_toggle.html) ---------- Round, squares up (but never to a corner) on hover, squishes on press; the sun turns into the moon. */ .theme-btn { --tb: 44px; position: relative; display: grid; place-items: center; flex: none; width: var(--tb); height: var(--tb); padding: 0; border: 0; border-radius: calc(var(--tb) / 2); background: var(--sf-high, var(--md-surface-container-high)); color: var(--on, var(--md-on-surface)); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-radius .5s var(--spring), transform .4s var(--spring), background-color .2s; } @media (hover: hover) { .theme-btn:hover { background: var(--sf-highest, var(--md-surface-container-highest)); } } .theme-btn:active { transform: scale(.9); } .theme-btn svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .6s var(--spring), opacity .25s; } .theme-btn .ic-moon { opacity: 0; transform: rotate(-90deg) scale(.4); } .theme-btn .ic-sun { opacity: 1; } [data-theme="dark"] .theme-btn .ic-sun { opacity: 0; transform: rotate(90deg) scale(.4); } [data-theme="dark"] .theme-btn .ic-moon { opacity: 1; transform: none; fill: currentColor; } .theming::view-transition-old(root), .theming::view-transition-new(root) { animation: none; mix-blend-mode: normal; } .theming::view-transition-new(root) { z-index: 2; } /* ---------- reveal ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(32px); } .js [data-reveal].in { opacity: 1; transform: none; transition: opacity .5s ease, transform 1s var(--spring-soft); transition-delay: calc(var(--i, 0) * 80ms); } /* ---------- focus + selection ---------- */ :focus-visible { outline: 3px solid var(--md-primary); outline-offset: 3px; } ::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); } /* ---------- navigation between pages: a cross-fade, with the bar staying put ---------- */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .22s; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; } .js [data-reveal] { opacity: 1; transform: none; } @view-transition { navigation: none; } } /* Google Play mark inside a button: flat four-colour glyph, no ring, no fill behind it. */ .gp-btn { gap: 10px; } .gp-btn .gp-icon { flex: none; display: block; width: 22px; height: 22px; }