.material-symbols-outlined {
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      vertical-align: middle;
    }

    .fill-icon {
      font-variation-settings: 'FILL' 1;
    }

    body {
      font-family: 'Outfit', sans-serif;
      background:
        radial-gradient(circle at top left, rgba(232, 59, 36, 0.22), transparent 24%),
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.07), transparent 18%),
        linear-gradient(180deg, rgba(20, 9, 10, 0.96), rgba(20, 9, 10, 1)),
        #14090a;
    }

    .glass-panel {
      background: rgba(27, 12, 13, 0.74);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 28px 80px rgba(0, 0, 0, 0.34);
      backdrop-filter: blur(18px);
    }

    .section-shell {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
      border: 1px solid rgba(255, 255, 255, 0.08);
      box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    }

    .hero-list-button {
      background: rgb(var(--theme-surface-rgb) / 0.24);
      border-color: rgb(var(--theme-outline-rgb) / 0.32);
      box-shadow: 0 14px 28px rgb(0 0 0 / 0.12);
    }

    .hero-list-button:hover {
      background: rgb(var(--theme-surface-rgb) / 0.34);
      border-color: rgb(var(--theme-outline-rgb) / 0.48);
    }

    .hero-list-button.is-added {
      background-image: none !important;
      background-color: rgb(var(--theme-accent-rgb) / 0.16) !important;
      border-color: rgb(var(--theme-accent-rgb) / 0.42);
      box-shadow: 0 18px 36px rgb(var(--theme-accent-strong-rgb) / 0.18);
    }

    .hero-list-button.is-added:hover {
      filter: none;
      background-image: none !important;
      background-color: rgb(var(--theme-accent-rgb) / 0.22) !important;
      border-color: rgb(var(--theme-accent-soft-rgb) / 0.58);
    }

    .hero-tagline {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      color: rgb(244 244 245 / 0.92);
      font-weight: 700;
      letter-spacing: 0.32em;
      text-shadow: 0 2px 12px rgb(0 0 0 / 0.42);
    }

    .hero-tagline::before {
      content: "";
      width: 0.22rem;
      height: 1.3rem;
      border-radius: 999px;
      background: linear-gradient(180deg, rgb(var(--theme-accent-rgb) / 1), rgb(var(--theme-accent-soft-rgb) / 0.8));
      box-shadow: 0 0 18px rgb(var(--theme-accent-rgb) / 0.24);
      flex: 0 0 auto;
    }

    .home-featured-section {
      margin-top: 1rem;
    }

    .carousel-controls {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      flex-shrink: 0;
    }

    .carousel-arrow {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 2.9rem;
      height: 2.9rem;
      border-radius: 999px;
      border: 1px solid rgb(var(--theme-outline-rgb) / 0.28);
      background: rgb(var(--theme-surface-rgb) / 0.4);
      color: rgb(var(--theme-text-rgb) / 0.96);
      box-shadow: 0 14px 32px rgb(0 0 0 / 0.14);
      backdrop-filter: blur(16px);
      transition:
        background-color 160ms ease,
        border-color 160ms ease,
        transform 160ms ease,
        opacity 160ms ease,
        box-shadow 160ms ease,
        color 160ms ease;
    }

    .carousel-arrow .material-symbols-outlined {
      font-size: 1.45rem;
      font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    }

    .carousel-arrow:hover:not(:disabled),
    .carousel-arrow:focus-visible:not(:disabled) {
      background: rgb(var(--theme-surface-rgb) / 0.58);
      border-color: rgb(var(--theme-accent-rgb) / 0.42);
      color: rgb(var(--theme-text-rgb) / 1);
      transform: translateY(-1px);
      box-shadow: 0 16px 34px rgb(var(--theme-accent-strong-rgb) / 0.15);
      outline: none;
    }

    .carousel-arrow:disabled {
      opacity: 0.38;
      cursor: default;
      box-shadow: none;
    }

    @media (min-width: 768px) {
      .home-featured-section {
        margin-top: 1.5rem;
      }
    }

    @media (max-width: 640px) {
      .carousel-controls {
        gap: 0.5rem;
      }

      .carousel-arrow {
        width: 2.45rem;
        height: 2.45rem;
      }

      .carousel-arrow .material-symbols-outlined {
        font-size: 1.2rem;
      }
    }