/*
Theme: Material 3 Expressive
Author: FlatlyPage
Colors: #6750a4, #ffd8e4, #fef7ff
*/

/* Shape library (clip-path). Use var(--md-shape-NAME) or the .md-shape-NAME classes. */
:root {
  --md-shape-cookie9: polygon(50% 0%, 53.4% 0.7%, 56.6% 2.7%, 59.5% 5.3%, 62.2% 7.6%, 64.9% 9.2%, 67.9% 9.7%, 71.5% 9.6%, 75.3% 9.5%, 79% 10.1%, 82.1% 11.7%, 84.3% 14.5%, 85.5% 18.1%, 86% 21.9%, 86.5% 25.3%, 87.6% 28.3%, 89.6% 30.7%, 92.4% 32.9%, 95.4% 35.2%, 97.9% 38.1%, 99.2% 41.3%, 99.1% 44.8%, 97.7% 48.3%, 95.7% 51.6%, 93.8% 54.6%, 92.8% 57.5%, 92.8% 60.7%, 93.5% 64.1%, 94.3% 67.9%, 94.4% 71.6%, 93.3% 75%, 90.9% 77.6%, 87.6% 79.4%, 84% 80.6%, 80.6% 81.7%, 77.9% 83.3%, 75.9% 85.7%, 74.2% 88.8%, 72.4% 92.2%, 70.1% 95.1%, 67.1% 97%, 63.6% 97.5%, 59.9% 96.7%, 56.4% 95.3%, 53.1% 94%, 50% 93.5%, 46.9% 94%, 43.6% 95.3%, 40.1% 96.7%, 36.4% 97.5%, 32.9% 97%, 29.9% 95.1%, 27.6% 92.2%, 25.8% 88.8%, 24.1% 85.7%, 22.1% 83.3%, 19.4% 81.7%, 16% 80.6%, 12.4% 79.4%, 9.1% 77.6%, 6.7% 75%, 5.6% 71.6%, 5.7% 67.9%, 6.5% 64.1%, 7.2% 60.7%, 7.2% 57.5%, 6.2% 54.6%, 4.3% 51.6%, 2.3% 48.3%, 0.9% 44.8%, 0.8% 41.3%, 2.1% 38.1%, 4.6% 35.2%, 7.6% 32.9%, 10.4% 30.7%, 12.4% 28.3%, 13.5% 25.3%, 14% 21.9%, 14.5% 18.1%, 15.7% 14.5%, 17.9% 11.7%, 21% 10.1%, 24.7% 9.5%, 28.5% 9.6%, 32.1% 9.7%, 35.1% 9.2%, 37.8% 7.6%, 40.5% 5.3%, 43.4% 2.7%, 46.6% 0.7%);
  --md-shape-cookie12: polygon(50% 0%, 53.2% 0.9%, 56.2% 3%, 58.9% 5.3%, 61.6% 6.7%, 64.6% 6.9%, 68.1% 6.2%, 71.8% 5.8%, 75% 6.7%, 77.4% 9.1%, 78.9% 12.4%, 80% 15.8%, 81.7% 18.3%, 84.2% 20%, 87.6% 21.1%, 90.9% 22.6%, 93.3% 25%, 94.2% 28.2%, 93.8% 31.9%, 93.1% 35.4%, 93.3% 38.4%, 94.7% 41.1%, 97% 43.8%, 99.1% 46.8%, 100% 50%, 99.1% 53.2%, 97% 56.2%, 94.7% 58.9%, 93.3% 61.6%, 93.1% 64.6%, 93.8% 68.1%, 94.2% 71.8%, 93.3% 75%, 90.9% 77.4%, 87.6% 78.9%, 84.2% 80%, 81.7% 81.7%, 80% 84.2%, 78.9% 87.6%, 77.4% 90.9%, 75% 93.3%, 71.8% 94.2%, 68.1% 93.8%, 64.6% 93.1%, 61.6% 93.3%, 58.9% 94.7%, 56.2% 97%, 53.2% 99.1%, 50% 100%, 46.8% 99.1%, 43.8% 97%, 41.1% 94.7%, 38.4% 93.3%, 35.4% 93.1%, 31.9% 93.8%, 28.2% 94.2%, 25% 93.3%, 22.6% 90.9%, 21.1% 87.6%, 20% 84.2%, 18.3% 81.7%, 15.8% 80%, 12.4% 78.9%, 9.1% 77.4%, 6.7% 75%, 5.8% 71.8%, 6.2% 68.1%, 6.9% 64.6%, 6.7% 61.6%, 5.3% 58.9%, 3% 56.2%, 0.9% 53.2%, 0% 50%, 0.9% 46.8%, 3% 43.8%, 5.3% 41.1%, 6.7% 38.4%, 6.9% 35.4%, 6.2% 31.9%, 5.8% 28.2%, 6.7% 25%, 9.1% 22.6%, 12.4% 21.1%, 15.8% 20%, 18.3% 18.3%, 20% 15.8%, 21.1% 12.4%, 22.6% 9.1%, 25% 6.7%, 28.2% 5.8%, 31.9% 6.2%, 35.4% 6.9%, 38.4% 6.7%, 41.1% 5.3%, 43.8% 3%, 46.8% 0.9%);
  --md-shape-burst8: polygon(50% 0%, 62.6% 19.5%, 85.4% 14.6%, 80.5% 37.4%, 100% 50%, 80.5% 62.6%, 85.4% 85.4%, 62.6% 80.5%, 50% 100%, 37.4% 80.5%, 14.6% 85.4%, 19.5% 62.6%, 0% 50%, 19.5% 37.4%, 14.6% 14.6%, 37.4% 19.5%);
  --md-shape-burst12: polygon(50% 0%, 59.8% 13.3%, 75% 6.7%, 76.9% 23.1%, 93.3% 25%, 86.7% 40.2%, 100% 50%, 86.7% 59.8%, 93.3% 75%, 76.9% 76.9%, 75% 93.3%, 59.8% 86.7%, 50% 100%, 40.2% 86.7%, 25% 93.3%, 23.1% 76.9%, 6.7% 75%, 13.3% 59.8%, 0% 50%, 13.3% 40.2%, 6.7% 25%, 23.1% 23.1%, 25% 6.7%, 40.2% 13.3%);
  --md-shape-sunny: polygon(50% 0%, 56% 19.6%, 69.1% 3.8%, 67.2% 24.2%, 85.4% 14.6%, 75.8% 32.8%, 96.2% 30.9%, 80.4% 44%, 100% 50%, 80.4% 56%, 96.2% 69.1%, 75.8% 67.2%, 85.4% 85.4%, 67.2% 75.8%, 69.1% 96.2%, 56% 80.4%, 50% 100%, 44% 80.4%, 30.9% 96.2%, 32.8% 75.8%, 14.6% 85.4%, 24.2% 67.2%, 3.8% 69.1%, 19.6% 56%, 0% 50%, 19.6% 44%, 3.8% 30.9%, 24.2% 32.8%, 14.6% 14.6%, 32.8% 24.2%, 30.9% 3.8%, 44% 19.6%);
  --md-shape-flower8: polygon(50% 0%, 53.2% 0.8%, 56.2% 3.1%, 58.6% 6.7%, 60.4% 11.4%, 61.3% 16.7%, 61.5% 22.3%, 65.6% 18.5%, 70% 15.4%, 74.5% 13.3%, 78.8% 12.5%, 82.5% 12.9%, 85.4% 14.6%, 87.1% 17.5%, 87.5% 21.2%, 86.7% 25.5%, 84.6% 30%, 81.5% 34.4%, 77.7% 38.5%, 83.3% 38.7%, 88.6% 39.6%, 93.3% 41.4%, 96.9% 43.8%, 99.2% 46.8%, 100% 50%, 99.2% 53.2%, 96.9% 56.2%, 93.3% 58.6%, 88.6% 60.4%, 83.3% 61.3%, 77.7% 61.5%, 81.5% 65.6%, 84.6% 70%, 86.7% 74.5%, 87.5% 78.8%, 87.1% 82.5%, 85.4% 85.4%, 82.5% 87.1%, 78.8% 87.5%, 74.5% 86.7%, 70% 84.6%, 65.6% 81.5%, 61.5% 77.7%, 61.3% 83.3%, 60.4% 88.6%, 58.6% 93.3%, 56.2% 96.9%, 53.2% 99.2%, 50% 100%, 46.8% 99.2%, 43.8% 96.9%, 41.4% 93.3%, 39.6% 88.6%, 38.7% 83.3%, 38.5% 77.7%, 34.4% 81.5%, 30% 84.6%, 25.5% 86.7%, 21.2% 87.5%, 17.5% 87.1%, 14.6% 85.4%, 12.9% 82.5%, 12.5% 78.8%, 13.3% 74.5%, 15.4% 70%, 18.5% 65.6%, 22.3% 61.5%, 16.7% 61.3%, 11.4% 60.4%, 6.7% 58.6%, 3.1% 56.2%, 0.8% 53.2%, 0% 50%, 0.8% 46.8%, 3.1% 43.8%, 6.7% 41.4%, 11.4% 39.6%, 16.7% 38.7%, 22.3% 38.5%, 18.5% 34.4%, 15.4% 30%, 13.3% 25.5%, 12.5% 21.2%, 12.9% 17.5%, 14.6% 14.6%, 17.5% 12.9%, 21.2% 12.5%, 25.5% 13.3%, 30% 15.4%, 34.4% 18.5%, 38.5% 22.3%, 38.7% 16.7%, 39.6% 11.4%, 41.4% 6.7%, 43.8% 3.1%, 46.8% 0.8%);
  --md-shape-clover4: polygon(50% 0%, 54.9% 0.7%, 59.4% 2.8%, 63.3% 6.2%, 66.3% 10.6%, 68.3% 15.7%, 69.2% 21.3%, 69% 26.9%, 67.7% 32.3%, 73.1% 31%, 78.7% 30.8%, 84.3% 31.7%, 89.4% 33.7%, 93.8% 36.7%, 97.2% 40.6%, 99.3% 45.1%, 100% 50%, 99.3% 54.9%, 97.2% 59.4%, 93.8% 63.3%, 89.4% 66.3%, 84.3% 68.3%, 78.7% 69.2%, 73.1% 69%, 67.7% 67.7%, 69% 73.1%, 69.2% 78.7%, 68.3% 84.3%, 66.3% 89.4%, 63.3% 93.8%, 59.4% 97.2%, 54.9% 99.3%, 50% 100%, 45.1% 99.3%, 40.6% 97.2%, 36.7% 93.8%, 33.7% 89.4%, 31.7% 84.3%, 30.8% 78.7%, 31% 73.1%, 32.3% 67.7%, 26.9% 69%, 21.3% 69.2%, 15.7% 68.3%, 10.6% 66.3%, 6.2% 63.3%, 2.8% 59.4%, 0.7% 54.9%, 0% 50%, 0.7% 45.1%, 2.8% 40.6%, 6.2% 36.7%, 10.6% 33.7%, 15.7% 31.7%, 21.3% 30.8%, 26.9% 31%, 32.3% 32.3%, 31% 26.9%, 30.8% 21.3%, 31.7% 15.7%, 33.7% 10.6%, 36.7% 6.2%, 40.6% 2.8%, 45.1% 0.7%);
  --md-shape-pentagon: polygon(36.2% 6.3%, 39.7% 4.1%, 43.1% 2.6%, 46.6% 1.6%, 50% 1.3%, 53.4% 1.6%, 56.9% 2.6%, 60.3% 4.1%, 63.8% 6.3%, 90% 25.4%, 93.2% 28%, 95.7% 30.8%, 97.7% 33.8%, 99.1% 37%, 99.8% 40.3%, 100% 43.9%, 99.6% 47.7%, 98.6% 51.6%, 88.5% 82.5%, 87% 86.3%, 85.2% 89.6%, 82.9% 92.4%, 80.3% 94.6%, 77.4% 96.4%, 74% 97.7%, 70.3% 98.4%, 66.2% 98.7%, 33.8% 98.7%, 29.7% 98.4%, 26% 97.7%, 22.6% 96.4%, 19.7% 94.6%, 17.1% 92.4%, 14.8% 89.6%, 13% 86.3%, 11.5% 82.5%, 1.4% 51.6%, 0.4% 47.7%, 0% 43.9%, 0.2% 40.3%, 0.9% 37%, 2.3% 33.8%, 4.3% 30.8%, 6.8% 28%, 10% 25.4%);
  --md-shape-hexagon: polygon(96.6% 38.2%, 98.1% 41.1%, 99.1% 44.1%, 99.8% 47%, 100% 50%, 99.8% 53%, 99.1% 55.9%, 98.1% 58.9%, 96.6% 61.8%, 83.5% 84.4%, 81.7% 87.2%, 79.7% 89.6%, 77.5% 91.6%, 75% 93.3%, 72.3% 94.6%, 69.4% 95.5%, 66.3% 96.1%, 63% 96.3%, 37% 96.3%, 33.7% 96.1%, 30.6% 95.5%, 27.7% 94.6%, 25% 93.3%, 22.5% 91.6%, 20.3% 89.6%, 18.3% 87.2%, 16.5% 84.4%, 3.4% 61.8%, 1.9% 58.9%, 0.9% 55.9%, 0.2% 53%, 0% 50%, 0.2% 47%, 0.9% 44.1%, 1.9% 41.1%, 3.4% 38.2%, 16.5% 15.6%, 18.3% 12.8%, 20.3% 10.4%, 22.5% 8.4%, 25% 6.7%, 27.7% 5.4%, 30.6% 4.5%, 33.7% 3.9%, 37% 3.7%, 63% 3.7%, 66.3% 3.9%, 69.4% 4.5%, 72.3% 5.4%, 75% 6.7%, 77.5% 8.4%, 79.7% 10.4%, 81.7% 12.8%, 83.5% 15.6%);
  --md-shape-triangle: polygon(36.8% 16.2%, 40.1% 11.2%, 43.4% 7.6%, 46.7% 5.4%, 50% 4.7%, 53.3% 5.4%, 56.6% 7.6%, 59.9% 11.2%, 63.2% 16.2%, 95.7% 72.4%, 98.4% 77.8%, 99.8% 82.4%, 100% 86.3%, 99% 89.6%, 96.7% 92.1%, 93.2% 93.8%, 88.5% 94.9%, 82.5% 95.3%, 17.5% 95.3%, 11.5% 94.9%, 6.8% 93.8%, 3.3% 92.1%, 1% 89.6%, 0% 86.3%, 0.2% 82.4%, 1.6% 77.8%, 4.3% 72.4%);
  --md-shape-diamond: polygon(35.3% 7.3%, 39% 4.1%, 42.7% 1.8%, 46.3% 0.5%, 50% 0%, 53.7% 0.5%, 57.3% 1.8%, 61% 4.1%, 64.7% 7.3%, 92.7% 35.3%, 95.9% 39%, 98.2% 42.7%, 99.5% 46.3%, 100% 50%, 99.5% 53.7%, 98.2% 57.3%, 95.9% 61%, 92.7% 64.7%, 64.7% 92.7%, 61% 95.9%, 57.3% 98.2%, 53.7% 99.5%, 50% 100%, 46.3% 99.5%, 42.7% 98.2%, 39% 95.9%, 35.3% 92.7%, 7.3% 64.7%, 4.1% 61%, 1.8% 57.3%, 0.5% 53.7%, 0% 50%, 0.5% 46.3%, 1.8% 42.7%, 4.1% 39%, 7.3% 35.3%);
  --md-shape-heart: polygon(50% 26.4%, 50% 25.9%, 50.3% 24.5%, 50.9% 22.3%, 52% 19.5%, 53.8% 16.3%, 56.3% 13.1%, 59.4% 10.1%, 63.3% 7.6%, 67.7% 5.8%, 72.5% 4.8%, 77.5% 4.9%, 82.5% 6.1%, 87.2% 8.2%, 91.5% 11.3%, 95.1% 15.1%, 97.8% 19.6%, 99.4% 24.4%, 100% 29.5%, 99.4% 34.7%, 97.8% 39.9%, 95.1% 45%, 91.5% 49.9%, 87.2% 54.6%, 82.5% 59.2%, 77.5% 63.6%, 72.5% 67.9%, 67.7% 72%, 63.3% 76%, 59.4% 79.9%, 56.3% 83.5%, 53.8% 86.7%, 52% 89.6%, 50.9% 91.9%, 50.3% 93.7%, 50% 94.8%, 50% 95.2%, 50% 94.8%, 49.7% 93.7%, 49.1% 91.9%, 48% 89.6%, 46.2% 86.7%, 43.7% 83.5%, 40.6% 79.9%, 36.7% 76%, 32.3% 72%, 27.5% 67.9%, 22.5% 63.6%, 17.5% 59.2%, 12.8% 54.6%, 8.5% 49.9%, 4.9% 45%, 2.2% 39.9%, 0.6% 34.7%, 0% 29.5%, 0.6% 24.4%, 2.2% 19.6%, 4.9% 15.1%, 8.5% 11.3%, 12.8% 8.2%, 17.5% 6.1%, 22.5% 4.9%, 27.5% 4.8%, 32.3% 5.8%, 36.7% 7.6%, 40.6% 10.1%, 43.8% 13.1%, 46.2% 16.3%, 48% 19.5%, 49.1% 22.3%, 49.7% 24.5%, 50% 25.9%);
  --md-shape-squircle: polygon(50% 8%, 53.7% 8%, 57.4% 8%, 61.3% 8%, 65.2% 8.1%, 69.4% 8.4%, 73.6% 9%, 77.9% 10.2%, 81.9% 12%, 85.4% 14.6%, 88% 18.1%, 89.8% 22.1%, 91% 26.4%, 91.6% 30.6%, 91.9% 34.8%, 92% 38.7%, 92% 42.6%, 92% 46.3%, 92% 50%, 92% 53.7%, 92% 57.4%, 92% 61.3%, 91.9% 65.2%, 91.6% 69.4%, 91% 73.6%, 89.8% 77.9%, 88% 81.9%, 85.4% 85.4%, 81.9% 88%, 77.9% 89.8%, 73.6% 91%, 69.4% 91.6%, 65.2% 91.9%, 61.3% 92%, 57.4% 92%, 53.7% 92%, 50% 92%, 46.3% 92%, 42.6% 92%, 38.7% 92%, 34.8% 91.9%, 30.6% 91.6%, 26.4% 91%, 22.1% 89.8%, 18.1% 88%, 14.6% 85.4%, 12% 81.9%, 10.2% 77.9%, 9% 73.6%, 8.4% 69.4%, 8.1% 65.2%, 8% 61.3%, 8% 57.4%, 8% 53.7%, 8% 50%, 8% 46.3%, 8% 42.6%, 8% 38.7%, 8.1% 34.8%, 8.4% 30.6%, 9% 26.4%, 10.2% 22.1%, 12% 18.1%, 14.6% 14.6%, 18.1% 12%, 22.1% 10.2%, 26.4% 9%, 30.6% 8.4%, 34.8% 8.1%, 38.7% 8%, 42.6% 8%, 46.3% 8%);
  --md-shape-arch: polygon(0% 50%, 0.2% 45.6%, 0.8% 41.3%, 1.7% 37.1%, 3% 32.9%, 4.7% 28.9%, 6.7% 25%, 9% 21.3%, 11.7% 17.9%, 14.6% 14.6%, 17.9% 11.7%, 21.3% 9%, 25% 6.7%, 28.9% 4.7%, 32.9% 3%, 37.1% 1.7%, 41.3% 0.8%, 45.6% 0.2%, 50% 0%, 54.4% 0.2%, 58.7% 0.8%, 62.9% 1.7%, 67.1% 3%, 71.1% 4.7%, 75% 6.7%, 78.7% 9%, 82.1% 11.7%, 85.4% 14.6%, 88.3% 17.9%, 91% 21.3%, 93.3% 25%, 95.3% 28.9%, 97% 32.9%, 98.3% 37.1%, 99.2% 41.3%, 99.8% 45.6%, 100% 50%, 100% 90%, 96% 97%, 90% 100%, 10% 100%, 4% 97%, 0% 90%);
  --md-shape-pixel: polygon(30% 0, 70% 0, 70% 10%, 90% 10%, 90% 30%, 100% 30%, 100% 70%, 90% 70%, 90% 90%, 70% 90%, 70% 100%, 30% 100%, 30% 90%, 10% 90%, 10% 70%, 0 70%, 0 30%, 10% 30%, 10% 10%, 30% 10%);
}

:root {
  --background: #141218;
  --foreground: #e6e0e9;
  --card: #211f26;
  --card-hover: #2b2930;
  --muted: #cac4d0;
  --border: #49454f;
  --border-strong: #938f99;
  --success: #a8db8f;
  --navbar-bg: #2b2930;
  --grid-line: transparent;
  --avatar-from: #4f378b;
  --avatar-to: #633b48;

  --accent: #d0bcff;
  --accent-hover: #c4aff4;
  --accent-soft: #4f378b;
  --on-accent: #381e72;
  --on-accent-container: #eaddff;

  --md-secondary: #ccc2dc;
  --md-on-secondary: #332d41;
  --md-secondary-container: #4a4458;
  --md-secondary-container-hover: #575164;
  --md-on-secondary-container: #e8def8;
  --md-tertiary: #efb8c8;
  --md-on-tertiary: #492532;
  --md-tertiary-container: #633b48;
  --md-on-tertiary-container: #ffd8e4;
  --md-container-low: #1d1b20;
  --md-container-high: #2b2930;
  --md-container-highest: #36343b;
  --md-outline: #938f99;
  --md-icon-bg: rgba(0, 0, 0, 0.24);
  --md-hover: rgba(208, 188, 255, 0.1);

  --md-elev-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-elev-2: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-elev-3: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
  --md-ease: cubic-bezier(0.2, 0, 0, 1);
  --md-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --text: var(--foreground);
  --text-secondary: var(--muted);
  --primary-color: var(--accent);
}

:root[data-theme="light"] {
  --background: #fef7ff;
  --foreground: #1d1b20;
  --card: #f3edf7;
  --card-hover: #ece6f0;
  --muted: #49454f;
  --border: #cac4d0;
  --border-strong: #79747e;
  --success: #386a20;
  --navbar-bg: #ece6f0;
  --grid-line: transparent;
  --avatar-from: #eaddff;
  --avatar-to: #ffd8e4;

  --accent: #6750a4;
  --accent-hover: #735eab;
  --accent-soft: #eaddff;
  --on-accent: #ffffff;
  --on-accent-container: #21005d;

  --md-secondary: #625b71;
  --md-on-secondary: #ffffff;
  --md-secondary-container: #e8def8;
  --md-secondary-container-hover: #ddd2ee;
  --md-on-secondary-container: #1d192b;
  --md-tertiary: #7d5260;
  --md-on-tertiary: #ffffff;
  --md-tertiary-container: #ffd8e4;
  --md-on-tertiary-container: #31111d;
  --md-container-low: #f7f2fa;
  --md-container-high: #ece6f0;
  --md-container-highest: #e6e0e9;
  --md-outline: #79747e;
  --md-icon-bg: rgba(255, 255, 255, 0.55);
  --md-hover: rgba(103, 80, 164, 0.08);
}

::selection {
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

/* Floating navigation bar */

.navbar {
  top: 12px;
  left: 16px;
  right: 16px;
  background: var(--navbar-bg);
  border: none;
  border-radius: 32px;
  box-shadow: var(--md-elev-2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar-inner {
  height: 64px;
}

.logo {
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.nav-links {
  gap: 4px;
}

.nav-links a {
  padding: 10px 18px;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--muted);
  transition: background-color 0.2s var(--md-ease), color 0.2s var(--md-ease), border-radius 0.4s var(--md-spring);
}

.nav-links a:hover {
  background: var(--accent-soft);
  color: var(--on-accent-container);
  border-radius: 14px;
}

.nav-buttons .btn {
  padding: 10px 22px;
  min-height: 40px;
  font-size: 0.875rem;
}

.mobile-menu-btn {
  border-radius: 50%;
  padding: 10px;
}

.mobile-menu-btn:hover {
  background: var(--md-hover);
}

.mobile-nav {
  top: 88px;
  left: 16px;
  right: 16px;
  padding: 16px 16px 24px;
  background: var(--md-container-high);
  border: none;
  border-radius: 32px;
  box-shadow: var(--md-elev-3);
}

.mobile-nav a {
  padding: 16px 20px;
  border-bottom: none;
  border-radius: 100px;
  font-size: 1rem;
  font-weight: 600;
}

.mobile-nav a:hover {
  background: var(--accent-soft);
  color: var(--on-accent-container);
}

/* Buttons: pill that morphs into a rounded square when pressed */

.btn {
  padding: 14px 28px;
  min-height: 48px;
  border-radius: 100px;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.1px;
  transition: border-radius 0.35s var(--md-spring), transform 0.35s var(--md-spring), background-color 0.2s var(--md-ease), box-shadow 0.2s var(--md-ease), color 0.2s var(--md-ease);
}

.btn:active {
  border-radius: 16px;
  transform: scale(0.97);
}

.hero-buttons .btn,
.cta-buttons .btn {
  padding: 18px 36px;
  min-height: 56px;
  font-size: 1rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--accent-hover);
  opacity: 1;
  box-shadow: var(--md-elev-2);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--md-outline);
  color: var(--accent);
}

.btn-outline:hover {
  background: var(--md-hover);
  border-color: var(--accent);
}

.btn-ghost {
  color: var(--accent);
}

.btn-ghost:hover {
  background: var(--md-hover);
  color: var(--accent);
}

.btn-search {
  color: var(--foreground);
}

.btn-search:hover {
  background: var(--md-hover);
}

/* Hero */

.hero {
  padding: 168px 0 112px;
}

.hero-grid {
  display: none;
}

.hero h1 {
  font-size: clamp(2.75rem, 8vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.hero p {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.55;
}

.badge {
  padding: 8px 20px;
  background: var(--md-tertiary-container);
  border: none;
  border-radius: 100px;
  color: var(--md-on-tertiary-container);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1px;
}

.badge-dot {
  width: 8px;
  height: 8px;
  background: var(--md-tertiary);
  animation: none;
}

/* Stats: tonal container */

.stats {
  margin: 24px 16px;
  padding: 56px 0;
  border: none;
  border-radius: 48px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.stat-item h3 {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--md-on-secondary-container);
}

.stat-item p {
  color: var(--md-on-secondary-container);
  opacity: 0.8;
  font-weight: 500;
}

/* Section headings */

.section-header h2,
.cta h2,
.text-section h2,
.image-text-content h2,
.newsletter-section h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.section-header h2 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.blog-hero-section {
  border-top: none;
  border-bottom: none;
}

.text-content h3 {
  border-bottom: 3px solid var(--accent);
  font-weight: 700;
}

/* Cards: colorful containers with varied shapes that morph on hover */

.feature-card,
.testimonial-card,
.product-card,
.team-member,
.countdown-item,
.pricing-card,
.faq-item,
.gallery-item,
.video-wrapper,
.audio-player {
  background: var(--card);
  border: none;
  border-radius: 32px;
  box-shadow: none;
  transition: border-radius 0.5s var(--md-spring), background-color 0.25s var(--md-ease), box-shadow 0.25s var(--md-ease), transform 0.5s var(--md-spring);
}

.feature-card {
  padding: 36px;
  color: var(--on-accent-container);
  background: var(--accent-soft);
  border-radius: 44px 44px 44px 12px;
}

.features-grid .feature-card:nth-child(3n + 2) {
  color: var(--md-on-secondary-container);
  background: var(--md-secondary-container);
  border-radius: 12px 44px 44px 44px;
}

.features-grid .feature-card:nth-child(3n) {
  color: var(--md-on-tertiary-container);
  background: var(--md-tertiary-container);
  border-radius: 44px 12px 44px 44px;
}

.feature-card:hover,
.features-grid .feature-card:nth-child(3n + 2):hover,
.features-grid .feature-card:nth-child(3n):hover {
  border: none;
  border-radius: 32px;
  transform: translateY(-4px);
  box-shadow: var(--md-elev-2);
}

.feature-card h3 {
  color: inherit;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.feature-card p {
  color: inherit;
  opacity: 0.82;
}

.feature-icon {
  width: 56px;
  height: 56px;
  background: var(--md-icon-bg);
  border: none;
  border-radius: 20px;
}

.feature-icon svg {
  stroke: currentColor;
}

.testimonial-card:hover,
.product-card:hover,
.team-member:hover,
.countdown-item:hover,
.pricing-card:hover,
.gallery-item:hover {
  background: var(--card-hover);
  border: none;
  border-radius: 40px;
  box-shadow: var(--md-elev-1);
  transform: none;
}

.testimonials {
  background: var(--md-container-low);
}

.testimonial-card {
  background: var(--card);
}

.testimonial-avatar,
.team-avatar {
  color: var(--on-accent-container);
  font-weight: 700;
}

.team-avatar,
.testimonial-avatar {
  border-radius: 40%;
}

/* Pricing: featured plan in full primary */

.pricing-card {
  border-radius: 40px;
  padding: 40px;
}

.pricing-card h3 {
  font-weight: 700;
}

.pricing-card .price {
  font-weight: 700;
  letter-spacing: -0.03em;
}

.pricing-card.featured {
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: 44px 44px 44px 12px;
  transform: none;
  box-shadow: var(--md-elev-3);
}

.pricing-card.featured:hover {
  background: var(--accent);
  border-radius: 40px;
  transform: none;
}

.pricing-card.featured .description,
.pricing-card.featured .price span,
.pricing-card.featured .pricing-features li {
  color: var(--on-accent);
  opacity: 0.85;
}

.pricing-card.featured .pricing-features li svg {
  stroke: var(--on-accent);
}

.pricing-card.featured .btn-primary {
  background: var(--on-accent);
  color: var(--accent);
}

.pricing-popular {
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
  border-radius: 100px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pricing-features li svg {
  stroke: var(--accent);
}

/* FAQ */

.faq-item {
  border-radius: 28px;
}

.faq-item:hover {
  border: none;
  background: var(--card-hover);
}

.faq-item[open] {
  background: var(--accent-soft);
  color: var(--on-accent-container);
  border: none;
  border-radius: 32px;
}

.faq-item[open] .faq-answer,
.faq-item[open] .faq-question::after {
  color: var(--on-accent-container);
}

.faq-question {
  font-weight: 600;
}

.faq-question::after {
  color: var(--accent);
}

/* Remaining components */

.product-features li::before {
  color: var(--accent);
}

.image-text-image img,
.image-section img,
.product-image img {
  border-radius: 32px;
}

.gallery-item,
.video-wrapper {
  overflow: hidden;
  border-radius: 28px;
}

.gallery-caption {
  border-top: none;
  background: var(--card);
}

.team-social-link,
.social-links a {
  background: var(--md-secondary-container);
  border: none;
  border-radius: 14px;
  color: var(--md-on-secondary-container);
  transition: background-color 0.2s var(--md-ease), border-radius 0.4s var(--md-spring);
}

.team-social-link:hover,
.social-links a:hover {
  background: var(--md-secondary-container-hover);
  border-color: transparent;
  border-radius: 50%;
}

.social-links svg {
  fill: var(--md-on-secondary-container);
}

.countdown-item {
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
}

.countdown-item:hover {
  background: var(--md-secondary-container-hover);
}

.countdown-value {
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--md-on-secondary-container);
}

.countdown-label {
  color: var(--md-on-secondary-container);
  opacity: 0.8;
  font-weight: 600;
}

blockquote {
  background: var(--md-tertiary-container);
  border-left: none;
  border-radius: 32px;
  color: var(--md-on-tertiary-container);
}

blockquote::before {
  color: var(--md-tertiary);
  opacity: 0.6;
}

blockquote cite {
  color: var(--md-on-tertiary-container);
  opacity: 0.8;
}

/* Call to action and newsletter: large tonal containers */

.cta {
  margin: 24px 16px;
  padding: 96px 24px;
  border-radius: 48px;
  background: var(--accent-soft);
  color: var(--on-accent-container);
}

.cta p {
  color: var(--on-accent-container);
  opacity: 0.85;
}

.cta .btn-outline {
  color: var(--on-accent-container);
  border-color: var(--on-accent-container);
}

.newsletter-section {
  margin: 24px 16px;
  padding: 56px 24px;
  border-radius: 48px;
  background: var(--md-tertiary-container);
  color: var(--md-on-tertiary-container);
}

.newsletter-section p {
  color: var(--md-on-tertiary-container);
  opacity: 0.85;
}

.newsletter-input {
  padding: 16px 24px;
  border: none;
  border-radius: 100px;
  background: var(--background);
  color: var(--foreground);
  font-weight: 500;
}

.newsletter-input:focus {
  border: none;
  box-shadow: 0 0 0 3px var(--accent);
}

/* Footer */

.footer {
  margin-top: 24px;
  border-top: none;
  border-radius: 48px 48px 0 0;
  background: var(--md-container-high);
}

.footer-bottom {
  border-top: 1px solid var(--border);
}

.footer-brand h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.footer-column h4 {
  font-weight: 700;
  letter-spacing: 0.08em;
}

.footer-language select {
  border: none;
  border-radius: 100px;
  background-color: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  font-weight: 600;
}

.footer-language select:hover,
.footer-language select:focus {
  background-color: var(--md-secondary-container-hover);
  border: none;
}

.footer-language select option,
:root[data-theme="light"] .footer-language select option {
  background-color: var(--md-container-highest);
  color: var(--foreground);
}

.theme-toggle {
  border: 2px solid var(--md-outline);
  border-radius: 100px;
  background: transparent;
  color: var(--accent);
  transition: border-radius 0.4s var(--md-spring), background-color 0.2s var(--md-ease);
}

.theme-toggle:hover {
  background: var(--md-hover);
  border-color: var(--accent);
  border-radius: 14px;
}

/* Expressive shapes: icons, avatars, social links */

.feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 0;
}

.features-grid .feature-card:nth-child(3n + 1) .feature-icon {
  clip-path: var(--md-shape-cookie9);
}

.features-grid .feature-card:nth-child(3n + 2) .feature-icon {
  clip-path: var(--md-shape-clover4);
}

.features-grid .feature-card:nth-child(3n) .feature-icon {
  clip-path: var(--md-shape-burst12);
}

.testimonial-avatar,
.team-avatar,
.team-photo {
  border-radius: 0;
  border: none;
}

.testimonial-avatar {
  width: 52px;
  height: 52px;
}

.testimonials-grid .testimonial-card:nth-child(6n + 1) .testimonial-avatar,
.team-grid .team-member:nth-child(6n + 1) :is(.team-avatar, .team-photo) {
  clip-path: var(--md-shape-cookie9);
}

.testimonials-grid .testimonial-card:nth-child(6n + 2) .testimonial-avatar,
.team-grid .team-member:nth-child(6n + 2) :is(.team-avatar, .team-photo) {
  clip-path: var(--md-shape-flower8);
}

.testimonials-grid .testimonial-card:nth-child(6n + 3) .testimonial-avatar,
.team-grid .team-member:nth-child(6n + 3) :is(.team-avatar, .team-photo) {
  clip-path: var(--md-shape-hexagon);
}

.testimonials-grid .testimonial-card:nth-child(6n + 4) .testimonial-avatar,
.team-grid .team-member:nth-child(6n + 4) :is(.team-avatar, .team-photo) {
  clip-path: var(--md-shape-burst12);
}

.testimonials-grid .testimonial-card:nth-child(6n + 5) .testimonial-avatar,
.team-grid .team-member:nth-child(6n + 5) :is(.team-avatar, .team-photo) {
  clip-path: var(--md-shape-pentagon);
}

.testimonials-grid .testimonial-card:nth-child(6n) .testimonial-avatar,
.team-grid .team-member:nth-child(6n) :is(.team-avatar, .team-photo) {
  clip-path: var(--md-shape-squircle);
}

.team-avatar,
.team-photo {
  width: 88px;
  height: 88px;
}

.social-links a,
.team-social-link {
  width: 44px;
  height: 44px;
  border-radius: 0;
}

.social-links a:nth-child(3n + 1),
.team-social-link:nth-child(3n + 1) {
  clip-path: var(--md-shape-cookie9);
}

.social-links a:nth-child(3n + 2),
.team-social-link:nth-child(3n + 2) {
  clip-path: var(--md-shape-clover4);
}

.social-links a:nth-child(3n),
.team-social-link:nth-child(3n) {
  clip-path: var(--md-shape-hexagon);
}

.features-grid .feature-card:nth-child(3n + 1) .feature-icon {
  background: var(--accent);
  color: var(--on-accent);
}

.features-grid .feature-card:nth-child(3n + 2) .feature-icon {
  background: var(--md-secondary);
  color: var(--md-on-secondary);
}

.features-grid .feature-card:nth-child(3n) .feature-icon {
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
}

.testimonials-grid .testimonial-card:nth-child(3n + 1) .testimonial-avatar,
.team-grid .team-member:nth-child(3n + 1) .team-avatar {
  background: var(--accent);
  color: var(--on-accent);
}

.testimonials-grid .testimonial-card:nth-child(3n + 2) .testimonial-avatar,
.team-grid .team-member:nth-child(3n + 2) .team-avatar {
  background: var(--md-secondary);
  color: var(--md-on-secondary);
}

.testimonials-grid .testimonial-card:nth-child(3n) .testimonial-avatar,
.team-grid .team-member:nth-child(3n) .team-avatar {
  background: var(--md-tertiary);
  color: var(--md-on-tertiary);
}

/* Utility classes: add to any element in a Custom HTML block, e.g.
   <div class="md-shape-flower8" style="width:96px;height:96px;background:currentColor"></div> */

.md-shape-cookie9 {
  clip-path: var(--md-shape-cookie9);
}

.md-shape-cookie12 {
  clip-path: var(--md-shape-cookie12);
}

.md-shape-burst8 {
  clip-path: var(--md-shape-burst8);
}

.md-shape-burst12 {
  clip-path: var(--md-shape-burst12);
}

.md-shape-sunny {
  clip-path: var(--md-shape-sunny);
}

.md-shape-flower8 {
  clip-path: var(--md-shape-flower8);
}

.md-shape-clover4 {
  clip-path: var(--md-shape-clover4);
}

.md-shape-pentagon {
  clip-path: var(--md-shape-pentagon);
}

.md-shape-hexagon {
  clip-path: var(--md-shape-hexagon);
}

.md-shape-triangle {
  clip-path: var(--md-shape-triangle);
}

.md-shape-diamond {
  clip-path: var(--md-shape-diamond);
}

.md-shape-heart {
  clip-path: var(--md-shape-heart);
}

.md-shape-squircle {
  clip-path: var(--md-shape-squircle);
}

.md-shape-arch {
  clip-path: var(--md-shape-arch);
}

.md-shape-pixel {
  clip-path: var(--md-shape-pixel);
}

@media (max-width: 768px) {
  .hero {
    padding: 140px 0 80px;
  }

  .stats,
  .cta,
  .newsletter-section {
    border-radius: 32px;
  }

  .feature-card,
  .pricing-card {
    padding: 28px;
  }
}